{"_id":"@material/mwc-button","_rev":"732-ca04868d43107e20fc0159832f902021","name":"@material/mwc-button","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.1.0":{"name":"@material/mwc-button","version":"0.1.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.35.0","@material/mwc-base":"^0.1.0","@material/mwc-icon":"^0.1.0","@material/mwc-ripple":"^0.1.0","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-KOLPAdUwLCoY1nVqKDZ1eAFMDOSsm5a6dXIZY/OtBiR4QT8yJcrbxkN93xY3E2gYdo2jTtcl2eCWrREAHHcw5g==","shasum":"ef0faad5ca8c3307d593a2052f887a49806e6fc1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.1.0.tgz","fileCount":5,"unpackedSize":15010,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8OmZCRA9TVsSAnZWagAApsYP+QFexU4gAZ9FtC6ulwLK\nmgWj4jhknohrCZmUJ7yWAANxpZrJT1bLc4zPQmx/N7RAAQFT9WAPq+Gb/r+p\n5FnWcEnhsCXLmJ+GKHkf8Qt66667DS0rRW21se1na1EQEfW+iMzNObBmynr7\nopIeNz4k7xGtYsee3zqHxmqmXSeyUPXzORUMb0iNr6JtjJboQa3VNTTMbK4k\nTMcU1L6ztH7mvtV0eHSXqKjXqCBCjuBa5Pzp8zh87cGPJqNnU0BRXfPRF5XI\nCl4v3OpkBcIjyFnSXfwKS+jZnbyihJJSXr0RVpoYeg1HWWoYCXjGZZlEiYwi\noLxvVWTj+xYdLeS0un3O56gwiEmuhPaQTym6HBqtn6Qw2YACBUbxO8juFp29\ndnyv94cdwp32LuPedIv3UFmkRr6AY0rbS89hBZJzwMoeyiQ5knj3dkPrIhXV\nTvGWNB1T2xwaryWLFrYwDS+zYWYgEqlcJJGVFasOpYUUoRmXAEx98Sh0/oZt\nU1NXSXFFLf4eY5aSPqYLyb3f7gz0tnBL5Ny6XVadW8PGSV8zdmdvIHBkS1yX\n3XycXgtikF6yZ49mY3ifEM+hxxVl/CBwd7sq8deZ44YNCVGkBEEjU0WMjUpS\nJ02MIld2BnIFN5ZGSyC8TLuNx2vlicrEwZZDQ14Eo7Iv3R4gtHXfTlBK9BV3\ndV18\r\n=i8hh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPV1AFILC0cAAi7FLQ9+/w6cg7lkAfZaCWXrWMTpMMVgIgKL2Jz3HUkprf5KLuO1YqzsCOSMFtQW+YZuph9VmMvaQ="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.1.0_1525737880302_0.4975172695736547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.1":{"name":"@material/mwc-button","version":"0.1.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.35.0","@material/mwc-base":"^0.1.0","@material/mwc-icon":"^0.1.1","@material/mwc-ripple":"^0.1.1","@polymer/lit-element":"^0.4.0"},"devDependencies":{"@material/mwc-sass-render":"^0.0.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-/wRiD3lEixI2cVyf66nfnMoy4iB2ZV+CfcVge/DZQ1zXX8bBGm8xTtvTkzMjWVVFMo14/JAxAuim8xsWwi9ygQ==","shasum":"1581ca11d4faaed50872ece6ea864512ff65581a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.1.1.tgz","fileCount":5,"unpackedSize":15008,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82KKCRA9TVsSAnZWagAARY4QAIJfLflxNVTnHWP6h27k\ndfnOWWG8UA+Y1FGGB/CDRqkCgDMz4ozrYdpzG61lzxq0/DkeblwpDOq8ngwZ\n/2RNAYwGqppS/iqNI/5nijUtorzbMlD8wFv2UT4ClNZ3j6uMcWqqTX3R2CiE\ntojBCO7Dk5WgJcQ/XbJxcep59a2kUhZ72eJyoWL3gmxLIjS8J6U3kzXPSfDC\n7kmNqKZrkwEpQeobf6cgn2yKBKOOvAJ5n4nDel+3JFcxssllmEBU5NgvRPzN\n5WZ+TK7O2FGHO7Ob0mf+e5Pevf1qfXs+thxv7+bJleXiaBvVXVtt0YmRIBKK\nSfiCrAFY289cw1FotQsgmm3y7LxMlyD+nxRDiPB/OtGkTi9hYPbCbx9K3hHo\noF7CCZXA5t8T+pbYt5ICdK24wHR4b6eLVMnwJ14BL1l8+zwkOBrKj3LRLBXo\n77GwSNcm44hnMfTTo3/x8zGrgoksGfAo7ItQ42m6W9vTCKqeEr9Zw8hxuRtD\nnweGHO2heTr/HiGo1+/siKjiRYB3kQzuGh9TZzQ4+jAUsX6NfvuOYBMoV2js\nAOp9zneZj1CwGGPvduINzVN6591ieoAqvYc10CYsxsgAFup/dXU//PHroo9x\npoqC+KNjPbcYBno51YcmP146tjuGz6STon8el45w7Lh5YR90eYD+EmDEJgiP\nj5oE\r\n=VP8D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICh2RB8XSXgh/Z0wYZgrpaQtqWqpRTd+6qv+Jc9HbSjJAiEAkqpkvq9HaO/QFLzVyKcLuvGsNYqDe5jO2MYz+Oh0l+Y="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.1.1_1525899914198_0.22424395711153955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.1.2":{"name":"@material/mwc-button","version":"0.1.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.35.0","@material/mwc-base":"^0.1.2","@material/mwc-icon":"^0.1.2","@material/mwc-ripple":"^0.1.2","@polymer/lit-element":"^0.5.2"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-3g+xdfo6zKRvZ2QYh0Ducjz8eRjesDR28KiFt1mnNDfHoZrRnoWhDTx8lnXOjV07aplNgnnWeW4F+DkXk1z+tQ==","shasum":"7863e7f5fce0c2ea8d0dbf3a2456b773bd8dac4e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.1.2.tgz","fileCount":5,"unpackedSize":14916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIvFkCRA9TVsSAnZWagAAeXgP/1ShDW2Q746FlTmas0Kz\nkJ1iJEsDdCw8VTKzfC2sEei4PRCiG3VL8o+RZd7YipiyYZwJRdwLB00ZuON3\nLAfLcC3gHe8xwzmUXCzeit7hf0aBHOHdTBvcZQbzbqE16cXtpVoFDEK2cA+j\nE272M5yzVBi/D+xAjM3UJB7HNd/GzoXBA7wqKX+KqAUJjPR1ng4CsDNrxf2g\n523tBBMJDqyfX9D+DoJn4WUFLcvkCUcAv6pGrK9cE//kGWWhBbA+Gnqg2nPC\nPneT9ufyXNKYL6fne6BABTv3ahHarNaL0ODYH+7UDtPGr7WygCwAHhcXfbr5\njF8SNerRYf5XiXavpDrvq2NTTbuKLOtikYxxM9Im4tHAYoAWPOEQShFlLdI7\nmkhHvVugJNaX4oJtajkXAUs4/DG6naNzhn0FKm12AhIvMCwSGhBumjYrYEod\nLNmdikMJIo7mt6sG9obnKuIKNIklVJUHFt0QkEJqFX7IfU8FMR1IjzRfr9DE\n1GfL56ZrVpZem5s5JmMtG4JcDF/+aOvgMJlDBePsOglH0YdaYdTIlXdMh5D6\nJk/HTeGhewlxxLRA96baYULamjstO3egUs078bdPABsEKwl6vA5zm5QBNL9f\nVd3ETdWNz+NZFVMAYps2t04V7/ppUPttVqR7F10fjpZSdiSlBGJzAzoE5z/E\n/Oxp\r\n=xhTI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDU22eodfDiWdlyF5qbRkWfYVkgnaA/4fuW7Sq+ApfRsAIfedhbwKnEbUCoDFBtkr3cySjhKVndv2Xz3QGJq0rjAg=="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.1.2_1529016675794_0.3177094832690006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.0":{"name":"@material/mwc-button","version":"0.2.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.35.0","@material/mwc-base":"^0.2.0","@material/mwc-icon":"^0.2.0","@material/mwc-ripple":"^0.2.0","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.1.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-ViOpBg5XUcwjqu1mkjgO2OEixQnuaxYdwvf2Y3j22m8e9e7r4ALMg6hfzj9fqxKn+npqKjSzxKas/8hUPksWqw==","shasum":"7d7232ea177e2664bed11ea9320929f96c9c3f81","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.2.0.tgz","fileCount":5,"unpackedSize":14938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbmwKeCRA9TVsSAnZWagAA+SsP/0DDQRFKWo/qRivAwSsu\nQ43vzN1czkinb/9+SFoGIG0znfe5OgIw77IHlni8MARTiZRwgQTafswBJ3SK\niG8TkUT57NQRHSpHOANlvESyv6J3UiAl9MZm0RyooPGesWD2qORISQkhK1Tp\nT4h9A2MNca1f7Az1i79QMFIYmt6yYOy5AICRrl73gv5ViHrT/MOxnr+C88ZF\net1nxfeFP6yCgYO4no0AkLfzBpOfcWIZA4nIq4sqn+UDkr8GkUquE71YVfCE\naC4SFgCK8+iE/R9OCMtuRHmjeEnkPrm/24taDm3VzjFSjrBd/NJ+c++vHubl\nrOvNbWKWvAO4eTZoaxKDz3fWEtrqBTqKlzKNQ+CexAbOMMK2n7poHXlcZy1j\nWFRoSsqEpa0yzUT5p96OrP7wteR9MJ8bWMvWfurb37yQ7NNIQRGO8YFYfrHn\nKnsAMDKD6lTX0An20EiiY3IzkYES/FlMzTu9HaTOxyd9fs3vyai9CrQZtKJC\nY2Lf8eOjyXix9oTiaQ6p16SHcrydzgNOK+CnHWcnmfUgioDPFrS2J9Lk+a5v\nd861W8nYxtz8RK3WDJyDRGnilUmSJY0LolcNwqC/1bFEqzRR062nU7BFn0VF\nxamkU6rFD8aFM/TVFlKFLfFt07pUgR+ghDQb0P1lq+z/Qz3vHj08FFDmxJ+v\nfkhU\r\n=+VNw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNKdoESsHlQe8BcrOFKp0AndYckCtNMl4qMuOP8q1JRgIgfEG20xtSLjcaLfz9atIpqPJzXHnn6aiKPY2Y4EWshw4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.2.0_1536885405885_0.17207953857046254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.2.1":{"name":"@material/mwc-button","version":"0.2.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.35.0","@material/mwc-base":"^0.2.1","@material/mwc-icon":"^0.2.1","@material/mwc-ripple":"^0.2.1","@polymer/lit-element":"^0.6.0"},"devDependencies":{"@material/mwc-sass-render":"^0.2.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-amqr10C9HhSu80CN8/yOd+ZNYeDqsmFFzUOYNj9cVemQlqQH+agAjLb8AmABVuttX49ODpK9vrAWgi/WmzF7KQ==","shasum":"be61290559d2660530cee573e26ee5e70eab7ed4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.2.1.tgz","fileCount":5,"unpackedSize":14944,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbpZQvCRA9TVsSAnZWagAA7y8P/i8WKAlj+j1rHittFwUM\npgIJUk5MccBOMQxATUtOtxRxVnIIEh4t221BKX4Iwh3nypKbLgFG7WGH61gt\npkgH0d1OvrNpdo8xIGgsCLzdNv6pDM4jHXr+ehOyj4pBq+XD/n/jy+PQ4zci\nFdH/LOHn+/KfhIOZeiEekPYk4kmG438ncEVh8vsIX0WU1FEFj5/wzc9qVH9z\nNN6L2fjhjeGhncSGE1eV5eGzviY1i+aaM4QI0vtv0n1Q8DAQN4MsooraDvFw\npobPXK/xTWSapk/GeIfynTNg7Oso5NzMCHHSzXaFdPJjZI0gqA3iNp/ifxg8\nArbZD9ZuO7GQoieRS1iOciR2tUH+izGxJ+2itHaZSExWFf8nXQQ5Ss63QHnF\nQDlw3UVWDAPrKcJaD0rxJx2E/hKQfOqGjU1W4sjFs76Wiseu9LAYjpzTF84k\nsxiPq/PZdIntoRjqI6ldpXjiViVjOL+CkWOKUS/uMeA/1LmShQb8juv206c9\nDSs1ipy+zMt9c/ge40nQ/WV9vDLVX8qgvKe9CtRNB29AYiMNyNpr3d+5mdF/\n1FY8WNTuEra6jDae0HgINRZfpTKIqwU9AD3HUG+PEPab8c+fy5cVnutHFxsw\nj2JcRIu5Kmo5ftFwOcbn/l+6q+LgG7OSLH8VUcgZAAzO+wqwlqKTatqrmNRR\nzzMa\r\n=YEAb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBJsxx7h9Oat5/TpgQevmhwNYjfoE0YlV4pN9hRT7+AwIhAMLiZT9dtEw67DR/8Fom44gzlT9wWumWhWMoBBOdFHvd"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.2.1_1537578030470_0.7039138162963043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.0":{"name":"@material/mwc-button","version":"0.3.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.0","@material/mwc-icon":"^0.3.0","@material/mwc-ripple":"^0.3.0","@polymer/lit-element":"^0.6.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-sc6O7YpR+Hmu3Sk5HgRxRyb3398PB3VV47wwV8v1A0EE/51yePlsiAXZR6cHDJ9Xn2llwgo4lElXcrIg6Jv9kQ==","shasum":"1a52ef219cfa8e2208b7dc873a53855e6d222273","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.0.tgz","fileCount":12,"unpackedSize":39666,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbtqGHCRA9TVsSAnZWagAANxUP/Ak+fx0jcEWlu8ddQ/+x\netz7oJDQgpyZoPwYAyHCWNV/0U0aF2ZjlvdAEePDZ4Bb5vnONxaMeuhrUhoj\npMbpBK11gxLg25dSBEL5+ZFt4pXiJv1SO8Lgwq//m4W7AGd0vNEg/QZroGh3\n9e8MkS1fpnNjZIW53dBchSQClnn75Ef6TWJhH/Ag47OBa3mLDFqOiOy3ls+Z\nxfhimY+YDWL3cyFygvGpVXUT1bZ9YJU2+k3h3qpvX5DSvwFtpHTRRM5ihYP5\ntw9W988u+oRev7HxEU6logiSOovUeWVHA08cy5N8v/Ae+0K2DYNLIEqlL7YM\n9/3cjm5RthcbHhbUhCh6YYVAQn17VL3kpTv1T4HSiTIYUtFW36YOveg1XoDk\n8x2AjAJGNSinTw7i/x+koj32rDkVCHAR0/MslJZ2QhLZ89ZijQQnCZlT+a+c\nkbMLHRfuKjSeE7IjCMw8qW2wSqU91X9VycF0NNv02dIiXXk2IGaHYVOLLSXh\ncmIQafLAtjhNwTB+kJOeMo6kgG0OSQ0w4aR+C7IhoiEkkSFla03JPp9SLcWB\nTKOPIwkLgvmJqs52U1jYpSoeeIqXFHqoFX8v/Nv/VSO0b9AKe/o9pTFRTTdX\nVHRHienLHlrf/X3xZCUOK+OZ+CjPDF8hALrJcsIP4JFSek+/vzrz7mOG1ys/\nzsle\r\n=ySfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBa0bcFKiwL8KiuUu7TLflQySeq2ZVQNF5Omia51SS08AiBS6QBBvo+ZHgt0Dr15l+XUTjuPQCHvkEf/THoutjTvtA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.0_1538695558402_0.7247062364966246"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.1":{"name":"@material/mwc-button","version":"0.3.1","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.1","@material/mwc-icon":"^0.3.1","@material/mwc-ripple":"^0.3.1","@polymer/lit-element":"^0.6.2","lit-html":"^0.12.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-gj2GV5uUWEHkiNyyTbCtyEcwAc1xd1nna7ckOlfhSGrKP4q5E2lIQ9Uw/qN2l+nO4K7+dAGBxIHr0sFwFyzWDQ==","shasum":"c865144e4f2d828175a357e9f6db71c4fd780a7f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.1.tgz","fileCount":12,"unpackedSize":39732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu64OCRA9TVsSAnZWagAAXvIP/2EJV6WfqaeQeeiXiy2D\nIEm5fgjDIC1ssOA5Zul8mh+RPPyF8vaLgYJQn43K7JDymMZJ+ij45iVsa2uh\n4cl0lVSVRuuyks7wTbVy/U3fEyS0/C5ZXj+ivTlSVLYgqzLyX/Dg9tE3pHh6\neWx5mpeasL8rV3WL/MpbpWiuqYVNWJDIBWvDQWBRjVzlBIbESP2uOV+HCZTJ\nfJAs2WbJ24/BEt+Qii5v8XOi9oDnQNKSIwVBLOF2FBvDAn93c+UuEn5cvCs6\n3eAg7mO1X/gcshTmnzKz0LWIA/ufCSEBe+8KDOFJOhJAG/cdSgRS3wP66Dn+\nKV7JXpzt1A5HcYFKqeMML0yqx24JrUAo9HVccPd6bMiOeFJTXNOagJCmgk3F\nl0kZJNWvGE4wBqtKCJwpqfoWK2MJpxdPl891U80GPmnQFE+7CBBWAT+jkIBz\nGLDoti1j0nRwO9ooRmw5SPogOGiwUQY4/A9NN8bhY/h6Bdq6UgDaCyhyIK59\ndCaFhBkjbsbYbLmzAV3ICyiFKEvmmVvx8juM3bQCQie257KC/LYIsuuaVuWW\nnmbEm1Kq8BhpuJTvqakGttLyjXSuIWpHanq74Pfh4ASxX/ak/e6nK+ZdQMzi\nDXCzjXpm+xd9TkK3CVZThM6lvpFsps/YKrB5zj/qPO4F5s14eepvMUMx8B40\nkW/c\r\n=/CjX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIV6KexKvYEYS0A+/AcWI0phGtB2j17KCbAPWlaF9yKAiEAw9odNYJkgf2YJHPNm1UmRdkZvO1LYKA8ffSz9RgUXoI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.1_1539026445358_0.7236785344860721"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.2":{"name":"@material/mwc-button","version":"0.3.2","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.2","@material/mwc-icon":"^0.3.2","@material/mwc-ripple":"^0.3.2","@polymer/lit-element":"^0.6.2","lit-html":"^0.13.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.2","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-Cr4uQ1AVpJPqklp1RjCOwG+KEbRMV0zXhDS8VkhlFS4gT4B/FxtpNqM3ItNfU46k+NASgM4zWCNz66+lbESwBA==","shasum":"94df42dc34c6b2c8317e936b944d09fc565d231d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.2.tgz","fileCount":12,"unpackedSize":39819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb73eJCRA9TVsSAnZWagAA3rUP/0YIyrQYXeDl3k22hbYZ\nJvt50Cq6JhEF5FvNvPqhBgjDxrzPG/JkCf4pBKEFOOmEMQhpxSrp9xRWmbnJ\nnLerqUgIXbUgQ8ZdPjvHP+8JpB8il0fKxi4OhZbRYubdkflLnyu2qb0+zGno\nznyfy302SCh+BZvmEM8YIuRAB4TWw7yCnkpChdzORU9KXcRfZn3CGZXZuyfM\nS6Wr2/kpeIU2DSU0PbXic58P3oacHFJjG+WsLLDHQ6hmeBAlRfnInpI/kyvb\n3UnPDUlbk2gBGJImM8C3zgY0F6YS+ZnurFLoUV7plzr/LO0oQEJzcloQ8P14\njHGkfbFxNJTACnBShhYJT6q/4Z0IUCYjF7wouDDmnVLWqs444gWLiTePlvzF\ndHVkNiY45B8vUc/sVhT0uZAq2rhTFdUGTyXZVTYcV5vpgZK1VqDKfHlxkpNk\n7nion4+I8Hq7w8Egy5Vd5wMyWs+IruVaEwg8K+S7CyZLplMwM6O8B9sGBqPn\nlwXBkVVkVAF6vgZiWV0cGpErEklDoidLZVWN/zUyqaNSKUNMsK4b+dTy69x2\nXPxX5GeBboCcXfrVJ/TvNNh/Sn9FfJgkeuC5ac3y2MjkHuLFARwGnsEcIStJ\npMYOuyjRxdw/+DxIc1sSeuuzDiKV7ysZqkt2uTsqWTN4KlzT0t2qXzSKV8f4\n6cQB\r\n=mxR4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVw1q3QprLg2gOqtzX7pVOIjcr68SUELMENk/ezsbawAiEA3Fb0MOxNGFdDO4GCWuLUevT9f237jOIDy2WsSz9ZPno="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.2_1542420360564_0.44269633902558136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.3":{"name":"@material/mwc-button","version":"0.3.3","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.3","@material/mwc-icon":"^0.3.3","@material/mwc-ripple":"^0.3.3","@polymer/lit-element":"^0.6.4","lit-html":"^0.14.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.3","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-2G2FxaJS0qVFiFGgXhQlE0Pq9sC73rpRaI31VDTlcb63mkTGuHbogRUgXOKnflQ+gk/wxUxc4F+ACIlwgZNbZQ==","shasum":"43862e2003ed825acb8eb37d339cfbca170d0254","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.3.tgz","fileCount":12,"unpackedSize":39819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBdEfCRA9TVsSAnZWagAAAwsP/R9/DOj04ZEtGw+xmh4R\nPwqtW/BVOvn90xsA7lsjRViAxNrVXT4rrwXLqmcqMiiJVnttJeI80xy0ASbn\niFICNfgYNUoTZ9YpImOb796wlt+9Lf3/jGSLD8V170f7nTg2oEaJZXVDqqhC\nqFlTFmzWdZ8CJcNIBcW1M8LRVBLi7cl6uKG93dJsk5zekcvhLiRdbQy/c7Dx\npbvkI10HBXAp980SVWV/lhpAvJ9slFzR6avl3RPdg0ASq7apBD5HWG1uQ+eS\ncQau0qoNzAY7BMj8KU8dqNl2RmivD1a3N8ZcxieO45fhxlM+osjS3OMzJnvk\nEBrbVXMziclhW3X4TagPGVEO1vtl4ZyOSD7/ym/fGK5wMEQsvu1v1Sm+k5zI\nb9qgoMRV97inezt4gxiw6liuzVahSxaA9WmdpHR+KuSsTUcrGDXaffvDlKqT\n7PQw7vZnaEkTwo3HOdadFS2lLWM7B0OwSacOz7bbF8C9I7xXRi6GEqdViBrB\nXjHpIoQTIsmmusG3kgZhQYcqHPfjsw+992Ijf9lPtiq+37u3154266oZYNjN\nA7+yINLPMPJotGwznxjU41I5L58YFjCdc1IGZKbz6o+OI4X+PZoae+OWTa3s\nuiP0szStqVfTG9j+8LYl4LNpZbH5QyRbqzKjHPpxzu9aH9v678xq0U6x7RaP\nta45\r\n=3juv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkxKcIzjquoQd2x30FBdSlkhjBOhLqR3v7GUBT/KZPggIhAIbBifYfjUErW2Gg89K/HFPu8RrFF7Dk/1CJaJ9jDv/m"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.3_1543885086079_0.0925691100691457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.4":{"name":"@material/mwc-button","version":"0.3.4","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.4","@material/mwc-icon":"^0.3.4","@material/mwc-ripple":"^0.3.4","@polymer/lit-element":"^0.6.5","lit-html":"^1.0.0-rc.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.4","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-pjL6TucaqVtcOiejlNRaPwXmg5XKBVzAhagC4X/6nd0oekSczwj9oAA7BzmcQMMhIJj9YJdhfYaarqWODTMiwQ==","shasum":"65a4b84874518395f4d1454781ebc07a6c77c88f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.4.tgz","fileCount":12,"unpackedSize":39766,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEsN4CRA9TVsSAnZWagAAm3EP/21mgzVi88wqEON1UgEs\nhUQSW63Ha0ZZ/NGaDKOPF8LTxv8nWfcxM1lyjFMZCUycRe+Fi8wuCJ/zyvqT\nFW/C/KlFR3eSf+bw/cyOcOxY2BFcnv+dDsNI24Gwbi4RabRaOwdi+zpdv8SW\nSd2UKljGRx5L8DeZ4Wa5ajQH3I2af6CL4V3x06tFnYLeFvW7IVP/0HfUwP4s\nOt6PED8scxSQ4JHobBuuMypjZSRUx5ZDS9Cv/tNha3bHBEg4I1w28YRkTjub\nUR726eiRo3I8FtW9YLXR2d/g/v1WBA1vJ1bh5m2jAKOVZZtWsCguNRhtfDog\nueEUDFFxTLnjwLqJ1/sespfGVlHqfYJIFbbfJNfBXtmDVoqQcOBIhUhASWmj\n6xECHT3M8R/b2rne0uRBUSpbdD0aKzg3w4c6VZouMmPUE8Uy4RYbj8X3uO+5\nS1ZL212OgDln1DUVJuYZBX8hFbC0mjhu72BlOy3HgUGcYcKg2L2lhvnD2TpQ\n2fDQhFFBOnoXyEiAHEbrL2uFXRPE+YWz1ZJoG3WU/MRN1yysB/2AgQIDnAU0\n6X/E9yVyJCnmwbuUiokFJpSRri97hO6e/qvezfrjx3fvFqmOba9ON22omgnZ\n0LGY3syY8K2bjUIBSpbrlox2NItSoAfVPpISI7WjeABWpoCMmsIg/zVWgEdW\nr3iI\r\n=rKmI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdjp9xX1vz427VEFFR1ft/HpFtTbqGvZ3q4BbRcvP1hgIgX/7KanSbnhAjsR3IbfKCNvM8t9ifNIzvwxnVNvX6sbw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.4_1544733559326_0.895291103115142"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.5":{"name":"@material/mwc-button","version":"0.3.5","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.5","@material/mwc-icon":"^0.3.5","@material/mwc-ripple":"^0.3.5","lit-element":"^2.0.0-rc.2","lit-html":"^1.0.0-rc.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.5","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-IhpcK7wNV5KQu0/fJIgZPZyvH8HVSxjUvj4oP8mOU5JUetybKkIdPA77MT+x++4pp8Rh5AXy0+YAf3A5dfF7Eg==","shasum":"b2de9cc5df42b3cb4c0322cd53d929ed218d14ac","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.5.tgz","fileCount":12,"unpackedSize":39704,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORXPCRA9TVsSAnZWagAAemkP/RoA9p8PIfPAfoZApS5f\nMxTrgt7Zlah2mOqQysKrwBZWbes8AzMSS0H/HvKNvS5oVK6otXZTPXMhsU1G\n73k5u9mZOXYKtZATSi3SjcEfL8fK+iYNMPdehQ0+IBha5j3Q9W9S/1arPkzO\nO7Cj8ZDHienUrpV1D1JhMoNLvG1JHdjDfYChsnyzD+UsLt+se9W8sPln7Wy1\nVJtFHLKH+OZ0bxjMEiYqRYETnt9hDu5nFlj43BrokszytHKHXCOKRtnjWuCW\nxKZxxzaS4rAs6tZehm6Un91j0MoJC9Af3QtIGc0SptgvNWsSzFGfReWni8dS\n6wEoVh13G440FwByY7fgo4ZlKrG0s4FfIWo47gwQmCZvXNjdmJz+MXpTd2Rt\nBtH2tiES4Oj4fEcZaSdu3YMxibrHg1KDW8p+wNto4ReKJ8Ij1XI8fu3qrqe2\nE7JTXl2hXKOxsQrKT0TYBYnRN4HD1qtpxsbDLtc0+PiG/XmIvNIMrlcIeuEe\ntjCML3TT/H/o1Ddc9dfyqrubuQVMeQ5WCFUu+iKYvF4uXNmfioYN+QcviA7/\n4l8EfteXcPJgZTQMPq/tDHaZt679fIuoKKn9B7jvA5unoDbMEeca3CcI8KJt\niwY/X9b2+bndVQqOtlBCgG6emvzu6yh+p2hCv16r3wfH0iAG+XXXt9i+rmRe\nGmkA\r\n=M6L4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRDh3SEmlmxavhzyk3H1jKmD7uN0Ze8AAg2G88wtQ3AQIgC1ksrnCa890wHsaLHJF4nJZNmNpwiTBj0mSpzdItG/8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.5_1547245006631_0.4697570699965625"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.3.6":{"name":"@material/mwc-button","version":"0.3.6","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.40.0","@material/mwc-base":"^0.3.6","@material/mwc-icon":"^0.3.6","@material/mwc-ripple":"^0.3.6"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.3.6","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-ueIyVqSklgMFvlVJFszzlQSwDBvCQtM7FXWBpMGPiUFbzyESb1Wy3e7K0RaeHWzWolUrq9INl9Tt+15i1hnBhA==","shasum":"86a05fe27ad365fd5f7d98d4840ef0def5f72096","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.3.6.tgz","fileCount":12,"unpackedSize":39499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWe+eCRA9TVsSAnZWagAAuZEP/2Yv594CLmshoA8q0TwO\nLEqbmLZWyEj2ARCPQ1rj+FV6n5I9QUmNDfe9MYBPOutxmjgRJou39IbT1xfB\nFr2tsIl43Sb4gT2+GDQwkQagnD2eJc9xnDnaxA/+OnTvUODD1AGlSOwodchr\nMCeAgyKftlggj1fDUTjn4NEjGt1FpMAl/QFYmDAxnEz5wr9GdjsVKl/wk6ps\nJdDdUT+p/WyOHkQ6sXMAm60AW4KmXddbpIKKqUOaN4IPXEA2IcXRocBL8xvX\nfDN6K8XrLybmbDWxokSc657riUk4u0ykngf+kbO59Bnysx6pZDCqH5lAs7Pl\nbrBBd5zQzu4Tqt9IMkB2Gpokuu+mjexLKBRFH3vihCPUjj806KmrFs4spyJc\n/XCj2NPWIZiTpByUV6NKjCKZzfcS5+Dl9pjq8KX9hHb5SPoNtNxjfYZi/sTq\nFbtpq1OIyHhMkXHQppCnNTCx85esNFZ3oxffG1ZqmOaaY+LSkLpuVCC+qgAh\nvoLsSvMmKoxAhYzSc0XlvFT+b6zESyvTYB6HpF7b7sspvoo/KKf30EeoCbw/\nTjrpUCx0dhWZ9f64psy+svF0oFl8xY2LO5jrdtBe96L3lsur2hoTqRj0xpRt\nhe1ugurqpb7oYMJXvamLvFCRPg9Xiq3aqa2hZtX/3iY1fbD/8CAUsTJ+2RCu\nCfzU\r\n=1K4o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpYhO9cUbC8FsiUzEVWQlCstDDuFv9+mo4qxVcXq836gIgP3mx/3//BrCtWM/A7ebZEc5XvDt3KqIbAoTBc5P+KQA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.3.6_1549397917919_0.31399151330805397"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.4.0":{"name":"@material/mwc-button","version":"0.4.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^0.44.0","@material/mwc-base":"^0.3.6","@material/mwc-icon":"^0.3.6","@material/mwc-ripple":"^0.4.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.4.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.1","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-308Lrol26bgauUwzSo/RzW9o6Aglff6YTpxsbNi3+bR4FIh20MpYxo6umKG8ix9xhezZ7YQFD0PR3JLLRUZJEg==","shasum":"e1e4b23ced20a641e04ea7c35fe36e4aa190879e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.4.0.tgz","fileCount":12,"unpackedSize":42995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchvbXCRA9TVsSAnZWagAAEhcQAJUBSWhK0zvoCiXDh5AJ\nC+EmZJc2XXYYkqoY8kZicRBlyyRBoor4nE265KjfactQrPiGA1Zn1lv3YwXt\nIx3Boiih25ughUi3G29/SzUM3i/Adc2RAeIRqgQw7pZEg6dgQkLnbfB4lyme\nIlwzGEW/8GuatvXtQqeRJtFo6CFV4eE6Y0cAStUhjC1MNRCwisQ+p7JCTPkY\noPwsUg2Zh2VRFWa9KbAPxke1y0K5Zyn5F9BUeLsbq3HZREYJLMhbErEpLqPV\n/UJABigsTvHtOzRTU70ZIkSsZ2oXrINXAmK3RbQrZK/f7/OV5HLq0q9rHS+X\nKYeb1/O1tAqLSP8mOmziPR2GNnMSYRs0HEuy9vvzHqWIEktzfkZPJqlgsNnB\nGEQ4sGbhr7aWKFhC0BhoJanT5+HUQ8WBDln/Gtpq/6qQja4LPXLk7Xzgko4s\nbH+5syzssv6ObTB2Tsi+qxvsgeiqhvlkzipVdD6wor9rCmaU156QQszZbZDu\nDDgM3Se4JdC5TTdL7gbu3mjL+cvXq+ktfu+WZjBPekJQpieOMd26c0ZoOAOx\nP9eN7V4NqJWfgjzU4+Xu7c1Al/doYsL8CtgjS2fQjQUn1tl7bOsNr22TgLJ3\n/jixzipzFsPT6DyyVFn5AXqlZk7WhMmL3MX84+/O/tLW9N+RPwq/5+580Gpu\nhifT\r\n=i42J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDt8lalQUU1S4KHFSTRfWqDPgwaDdHCR99TbGSFCfZamAIgOTyNLPT2SxRJtfTHC2VbhPWnLlIeAHMqYh7eTRcunpA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.4.0_1552348887143_0.018036317494266596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.5.0":{"name":"@material/mwc-button","version":"0.5.0","description":"A [Material Components](https://material.io/components/) icon implementation using [Web Components](https://www.webcomponents.org/introduction)","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^1.0.0","@material/mwc-base":"^0.5.0","@material/mwc-icon":"^0.5.0","@material/mwc-ripple":"^0.5.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.5.0","_npmVersion":"6.4.1","_nodeVersion":"10.15.3","_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"dist":{"integrity":"sha512-XFzMuEGCtiT80fw5B6TibyAq3LPTUKXlbvgGg8kRSFsWJUXLfZKzCp/J3oJRGxZeSut33HiYXoQ1FAq9cygXeA==","shasum":"3456bfd9ef7d91d96c623952cca974216bf47f3e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.5.0.tgz","fileCount":12,"unpackedSize":43261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmqn7CRA9TVsSAnZWagAAppAP/24kg6YcAUcpiQ+NKldw\n2ZOT4tph4ocqzbrHnCBIEw2MmdPhQMVMYtqcDdg8ediE7WIpOmyUhFYsD/Tb\nQgRQu2MfQ/0BYxFkRRD2X49xu2zqmjN3LtRUvb1TdsBWl8j4AdjApxb3qXcr\nT58vuWbJl1mTKmeHykekPL0bKBtY3Hi8/YDa8chg7g+UvVdfnCcvqDVNYEOj\nB43kX5FHWXXHU4XWvBouEITtPpraB4R/eCgLM2Fdf1gCYanbwWmOlrHuPGGo\n/+VZBeKs1Ulyl7/7MGoWVS01ZgyfAFQYGftttHU7WLT8jsdUhT5ZcbdylTrl\nReHrlmVnh2yzzKV13WjDEB7VHmdhWTy9oD3lXf6Tnnm7h9PTVT6cr/t8jIRo\nr8ivM7RO/C9r0xrPi+8OcnLmWt9S0GihQ09IC53XEQ4+1EQS0DgSc8r5vjsJ\nfbsOYakMH0HdO2+tnmyuAoD9uCBju94fSUZ6F9D2m7iCJfonAeWUbxeJYJDR\n0/5iMwT/bRZJJ/PU6Gfwt06PEnWjIu0HFQSrdb86efJP1uq0I/C6yXV1fy1Z\np+ER64dVBIYQAbxzmQyXbiG3sumNXDuJD+l+61Tv+s4Sf0zUu7A4HJ5dg7ZC\nQxFg1E59iWioHyNigIkSLgDNkHQzSGlT0qhUnPwPhpvDGtIVioBB1bZydU4A\nqEWf\r\n=pZEg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5NMbp+gt5OlATviG8W89QwnuH+VM1dAH4RsJoOS5TkAIgCrU0RuVyunxcZOkCp4EPTnsAoW3titDg0/kc8zCpfLM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.5.0_1553639931337_0.49710680870816093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.6.0":{"name":"@material/mwc-button","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^1.0.0","@material/mwc-base":"^0.6.0","@material/mwc-icon":"^0.6.0","@material/mwc-ripple":"^0.6.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-oZTXXtg5z7tqvbFN5gMWsya/OU1ThEQ8ZZ/KN4PzDHGoYcjGLWWYTyDtarfP2VfJn+pRL0Ql5+l3i8j1i4Vr8Q==","shasum":"5264623ab7bfc80cc0a118ae9188a2c69b4a8e8c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.6.0.tgz","fileCount":18,"unpackedSize":285293,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAkCRA9TVsSAnZWagAAXIsQAJsd9Ur9BF5LHSozqwFY\nuvJHunV9aezJc6yelQgzmrzxf6NtG6fTG4oyJG6dYdEodwcq8QO7Psll7hel\nNlN8PRo2QCDQI6W/DoM4NmMhUgOGjB8k/ESGS7blOk0NXzuSKvnE+Nd6gnkJ\nM0ZMEGAilSvM7mF9ndSmkT5ZC+pHyNQBwSPMgwYL7GpkXBJIAaxNl4Fo5QTq\nt22MMHuhFQgcAIraLwcORtXTiow2zO+pSsF35RGZU/uDoIeVmhSPLuvnOPQQ\ndNdVfegCiPXk56vOJOg6mo1GwwJLoaXygfrKGiM4pt3YO4++bHnuI3DCQ3RV\n3qTJDMjBYiC5kRvo/Oorb17I1TYQKEdF6jjEEK7CCEIdXepTHEXudCFIH+LX\nSd8uh8FWpi7iqIf7yTgDndjckvlSqud4gqzduBFLu4kfV7O7Rw+4kAiJPf0D\nU1B3HToJLGSfehOgtd+FsvLJLM7c8hPHKYfr4xZ/Bz97Q0Yr9GQ4fmXG1tsN\n1YyQbU3S9tBUTEL1N2OZ336IdvBL4RDOmAUS3ZITo6+05V4e00j+0Jv0DUSO\n7YJi6lJfAB2SV3RQd+H2ZKvnbViZrUztavQvr0vcXKqv3sPAKCqcRo4QVWKF\nfmDZmFf0SJBRuFv2xeM75DOSPNLetnx5j/d+hfYiYnhH37/vNzk6AR7wTdsA\nhxoJ\r\n=RpAO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvNwaqCysPgK9yX5vlElEu2j3IoqmeNhJ2bsWr78JrPAiA7Nws6CSvvzOWQJr1iAwMmahDfQSa/H+8Ht9ew2ZmMfQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.6.0_1559773220091_0.7519515010564053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-button","version":"0.7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-icon":"^0.7.0","@material/mwc-ripple":"^0.7.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-Ypx20rYvf1uC6zXdRi92OmGblMujNE3pcTnfRCxuqW/cycQG/oZymC2RlhHWwdeczGxTuRmr+tr5S+lBHQHx5Q==","shasum":"e699d4ad9958529fa710c62ce52c79b165be2c61","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.7.0.tgz","fileCount":16,"unpackedSize":60835,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9oCRA9TVsSAnZWagAAsGoP/jKYIbmAMAAu5zH8GG+v\numgS/y4/M32gMREHr/eE9ww5FPCD5b+HQlg7OkcjGsdkHlhcGQaIDvLQ8v6J\nVbuUfnRUmpxu3i5wE7xnfCEucizsjam57PGWlAySS6FIUZsMeSgIQfOfoQhy\nuWe/RzlLGyJpik4aqfHbAKUjh51b05M9wBVnLgLpYaZVOEEnAeCNNsXiS/Vz\nO2+xa7LANuuLCkn7WGijtGkmBwe+YEtV/3sQXuOX/Scq6r+JYMIQ3fsY24Wy\nC+jOs1m0Uyqz1ovDs+iUqp/UkgtpgAevFZQE8L3f4Ztal2g00awUney6FxSj\nccx9KexZImrAO15hmYIrD2Xg35OyxgGTW+2xeFBJfnfXC41mfA0hSp1vImJm\njO0iS7xzAY5A7E6pYOhKUn/A35eHTX4FKb5eOYtdkSYwR7cZUF+xwSJnQue6\nOZxPZ6Oxw2NzpC/k6xL7CHy6uGVf5QrxMlwepShXiHRMCnilApNnbEaTpnRH\nP2BBCkqeU8fLM9o5jETUqSCIHIOiwqw9OBgpeyCSjimNlPsTWjxrVTw+MMgj\nBYgSGI8cJoIyJhbVvnPrw0MD11TSUM9HunyFCReFZaDTs2IRn/5/+8e6LqEA\nAUcvkDUEA1FADI4GjjnGzBGLZQSnt0aeN5mfNqkGMni9+ymqJBEFeIiRMF5q\nq0KP\r\n=hmI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG08RlkyQ9q3A82MNeeCuXrepC9pkPJcQR207v48FoLkAiBsqDKShhIcrU95xzAU2hQ/pEeVNSi5+nQNqfIv4DORBg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.7.0_1566941031569_0.5908359681182282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-button","version":"0.7.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^3.0.0","@material/mwc-base":"^0.7.0","@material/mwc-icon":"^0.7.1","@material/mwc-ripple":"^0.7.1"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-V7S9D2wUDhYMplO4AL/A49p9kWiEE9QSR2AN8eZqPub+ThTxiQwyommV0Izj1ExKfWuw0KFBBXpsRb+uviBqIw==","shasum":"fe7e5bc488528e2d24894b82799aa20f8451817c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.7.1.tgz","fileCount":16,"unpackedSize":60864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezgCRA9TVsSAnZWagAAI2cP/i0BBoOOMQCqfhAxlWoM\nEgjqxVeq/uxBCdJfPzJ2I4i2eus93K52thCP+Rdi9Lq8Qtc0kh+EFzvp1J4M\nyugswQMnqD6k6FasSrAuRSagD2TPGbCAYa+WaKXzSAMrYEK+etyALstcS735\ni3dWgbOQnemY8V2Z/FGv5i4qVNe54F/dpt4JJ4UT8+oFIknEcHoCyt63iDMl\nPcqrme+S6jLfc/UaJFya2SUCIYmIUYYmnANZW+j0kxRyX3xp8NfraZdP4Qr1\nV4yamH7VhiSw303sguV66ftuFPB/FVWk4yP5HIvf5yYThVJDqiuM/QL8fxC1\nKFmXR2Fg1IizjEzJ36X+330f4OcqCShtzHb73xS3xnqnu3bBsjyrSVSXnyUu\n1TPWyi/UknP3dHNO6WqNwNN9nsQPRSWSMRprTz8HTWhRrADHOaK7Z/2Hfgeu\nP240l+2Amw/SLQIZu9oO2miJHUoVQB/08JAaEOxcJgzXtQC016+PVQEmsX0D\nKbqa0G3toh4UCnt8+T9ujz80lWiL8SQRFzxNpExydxV7YCw+EYiYsI6K+cF7\ntDNsA7/bc8dJdaU1vZGjagG3jcrHlmi86rhBJCSSHkbjTe76iOFaJBoky2IR\ngXmR4l00qLN7sIzzWEM1N9WaOGPXjeyc+LfeOjO3RCCU8hBiOWiHo44TIZsg\n+p8h\r\n=8B+z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnGUJl9JH6qvenqUnbA+IlolwYsRSt/YTnypmMFxmBjAIhAK5A7TUK8oVXDK4IIz1GkjFDy8BYWVCtGIEl9jNRcRQH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.7.1_1566960863669_0.24313457650212134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-button","version":"0.8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^3.0.0","@material/mwc-base":"^0.8.0","@material/mwc-icon":"^0.8.0","@material/mwc-ripple":"^0.8.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-f4BelOfCFVlNJuNQuO9nImYv21STPg4iStrzG7N11ptACFj6TxuOR9ghT9xAHHIL26RIySGq/N+eAy9nuFynIQ==","shasum":"32576f27383e9f60c3eedfa1e0a3b6c6ab85529a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.8.0.tgz","fileCount":16,"unpackedSize":59806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+fCRA9TVsSAnZWagAAaKgP/3ASbkuiAJ4yEt8I1arR\n7rI4AAn7NYI9CfVQlAAKTwxYcj++qweNdJy0Vi0TN1ys+CzDJMPqM4TVq3Ho\nuqWdrhWsQINgpLn+JkGlxrDrklR8zYg/uXGpGVzUAeuuJZ2bsBHoxx1wYZ/T\nutlPpKwdwHKIJnAnGnhO+Ij9uBLjCdfrisktdp6S9NgN8MjcMHWYho9MIcxZ\neeKwYBVS91V4sP4MU25M2RC3GsGPiAdpejoWMJYFoB2+aWB1o6dO5Aaj9PPg\n/3kQyB6gnnxKFMfxKEwXZ0pKtmHttOd2URxfPohANa1Gfbbp4e8z+9d3J/k7\nX2YGD4dYqj8+HcW6c1AhE6kJhTf4O6E817+s9uGIRmG3WRd5Hkt2AJYmOkcY\n6CSkoYc+IR2qC8nuFM3d0rTERLdmW8qVyeHIwWjLxOKXBzC8isTXvRwb1X5b\nj3SOJJXq3AlKTKb30qlcKCnYbC6F6qu4XckI84nJ50BXaxwNvlxsQ3gXAiUk\nUq1r233YbqHm7upyWOjM0aNQMZqLeuDCT53zkivqGghRgokdZEIzmPvx4+4I\nCBGy9G1aPfEGvbJwRsVkEpKPKRHkEBpSgnYQtciUcRvRdJdiRrlDp8u/MHxZ\nnssUpDmDx+KBuQQ+whnqEWoad7PUjXq/7lN4n1t48Mexg4/zTDe1b92124WT\nLGTQ\r\n=/cbA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE2G4MR3tNT9M+qeWxb+GqIzL2EhKkvhOlrrN1if39lFAiBCbYlDk7SrEnkQvOFgf9uXVmTl0h/lf+XwJ42FlBZ09w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.8.0_1567555487079_0.6223876260751371"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-button","version":"0.9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"^3.0.0","@material/mwc-base":"^0.9.0","@material/mwc-icon":"^0.9.0","@material/mwc-ripple":"^0.9.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-usGetCNBrYXldTYgp5WVHXHOCu57cj3nYa4U5txzyHXgQRgXeoykXFV1yGUvozFX2bT8VTAl1XBvOmRtIc3djw==","shasum":"e4605f835e362d5d2c7b03489f5139fc35636c33","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.9.0.tgz","fileCount":16,"unpackedSize":61709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeRCRA9TVsSAnZWagAAO4gQAIxatn/kQ+GN3Rsd+wuv\nA5WooR/mYGweB0mgQhV0HFODu2M2ZtTzlAPuFkohFrBFm4TOTlMJshsulOa7\negtYRTmSXwVXTPccZvJNqMLp7g/rZI9aIbOvugWw3BWoLa+wnBs9/QGNYZfw\nQ6uqCPabFU/Q8tjppNTJWg3N8CZdNJ83BFqr4XxExwyX+cpNFDYpexSrWsD/\nJ8cbQqeFvgjFpZBAroJ58gbFPsIrWG0EELCS4pAkE7i/N5aN8cQqbeGZMXMX\nuYtQUmvAffg0NaXFn1NhUtWHIww2CxV1Cy/Vbt90QgUHJvuzRa/xXAxxFgOR\nliTTEWkYqJLqi9Qm2c7ji6sAtdvtwBIwozzRsz/SFt0M4D+qTIjn1KFguHGv\nbdnzs/9/m2tEvMXIqg6fl1+OGJxyYhrg25mLXMGbKC3iV3wogT1OxlIXU4Ip\nJlhkTH61fpZ1mDrqPR876OhDOdblvjoI7B8iGE2sFTS8OfskeuaLhn39wPaP\n1NrKYfpLAkv6RdxPkWyIZOLs9vw8qvkJRPAb5TJFIqffMraCaby147pMTTVi\nK0pYN4SKErFbNegQQzQuUIGwwa3woedJ0AFEReJ+YASeQ04uY/ur+ON66xmt\ntBAaxQxzl2dIn7YcJDmh5tj1OtZOtN4xByCTxT5gfXvsetHnMUYd18bPVHWI\nYawO\r\n=FJRS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmA6DPyBHSB5qhWoFTMSAKbx04HEKaQZrjbUiBJv+PfAiEA4QrtN5LFHNNTh0bfi2mtpv1cQtx0s/WePZMJOW67aeg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.9.0_1569548177027_0.13669513402166866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-button","version":"0.9.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.9.1","@material/mwc-icon":"^0.9.1","@material/mwc-ripple":"^0.9.1","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-OVvRCaeB8p0xFbLaX3TxU6UWxuDZSzY1FX2u0fy2cmF+F/3W72v113DwbvE513In7j/x5u2U8RimxOQMnsJGpQ==","shasum":"9e467897b139c420a06a86a0b8bcfad91edac5ae","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.9.1.tgz","fileCount":16,"unpackedSize":65397,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm3+CRA9TVsSAnZWagAAqaoP/jEqTaV5TH/7nFpIIzem\njgLoGJTGpO8OANwQbjzSbQAvkXc/SCXwI/x1cHCsjU46iwABK4nzfa7lcsxo\npL5uUPRILYE0jS05M0GGr5gaJ+DIusJhmEsJY6MvJK5y0gxsx0N2WhjVeYh1\n/Xo5aXIM0/gyzG5th4xF1OuYi0tUBv9/kAFIG3WP4YXI4ZI4vUek8TXPt8mv\n682xtHFyJ3ji7AcCW6Vg37ruBqZ4iGtV5L7yTgJz7U1sypfgQ+Rw1iFIN0XO\nHrFXPV62TIrhrWoxmnF0XxicAVw8Sb08wKJSdoD+4YPqCDDA2s4hlYRNOMla\nQHaBkFJZ91/OE2G0IitNsY9esD1p7do1HDWJFQ9HiYve1CiZKm9ZIvseK1d+\nDZv7JcOMts0pVXt5XXRfYiyTlMg+8npoZiofhnuMG3AVP1wVMUXyvuhuR5X5\nJT9L0UruOKxKrpCzmo9DWhRtWsmG/Whrv4H4WUGwL9tEFVz6r/Iq5D88Vso8\nFK8XmsajHSdWXTdC6ZGLFAU4/G3w0riLqvDBN2g/3haN7z8Tq01wzAz4f43O\nXk7zbd5OTMmLK1j2heiiywcXw/XYdP829AHPxs+xB6v8OFVhEvrLp79AnH+e\nxGqQdG2h4w4HUkMxOL52XmKP5QmnM5nWXtehlcS9Ub7FdveF0aQyqiCBtxJN\n2hpl\r\n=vQDI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxKz9HFaAAq1OJqp/5k1Nl2iCKvES21WDP54MNe/nyhgIhAIRlC6q0/Ry57d9aTYidQmcCdz9e3qxuvqcp1KXCuDTq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.9.1_1569877501973_0.08103853085852974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-button","version":"0.10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=4.0.0-canary.e851d4f40.0","@material/mwc-base":"^0.10.0","@material/mwc-icon":"^0.10.0","@material/mwc-ripple":"^0.10.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-pCwxCUcR7IsAXZisvwATPG0pyKzo9fZeHCG6UFXxVTl8nMVAN7mtSdwFbtM3RE1AZIAUZwKZ9GzhA6C40NfSdA==","shasum":"6379bbe7fc2efd2bfaabf24a8fbf99a495589dd7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.10.0.tgz","fileCount":16,"unpackedSize":65446,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAUCRA9TVsSAnZWagAAQ2cP/0B81u/Y08/2VWNCHuka\nfi1OSRRt+B1TLl4lZK1lnU+/YCH74umq0FYaKhnc3KLdeU2Atr4Clnk1XKZn\nYjgY2t88mU2x78rjcKhyNsCkAKzr22jcFYIduZzku2c+OlGANDaq9DfScCHw\nS91F64ErL9RwvOticYYNYdjEOEwEzCRP+H7OqRBmd3SmVbmmJMpSsnKiLvs+\nqujiZhMX5c6eZxiz0RPnGQHDifI9cfQ5CY2mCUNChs/+8Kjlh2mHZFQV59cz\ne0aTfGq/1AKqrdJPQaTJzbliuLyZkpGXdyE8smhbljLPrGY8amlWX1MaaX4C\nOlKib9NR1PVgYEQUPFQb9i+fU/uNURDrFIRFrXKtRcxS5F3T1Zrdb9QBpWfB\nQ45eQdeLGVHn6fig388us+kq95gfJrs/NMOdvvkiZnqx6gvVEEedcptzjgYM\nhpQL0dHUOjWWTL1MQmryFri8HUl/nMMfXRMlK/dFTDXtUom4E44h5Gi+jEOv\nMwfSt/x6/7vK6/quzkImx5NutwOCw47GkrV2nV2MtG31rWZLeJVYzLMA+dlJ\nwEirxjGyKdVvVeGAbSg/cthTMVkrcMjq3y7HfjZCrJ2c9afb4PBsCNpKxwHQ\nGswUBSSZtIsY0yDu2cap41kFByVfmGhUk6Zp0EzPnZErV+1bv9tV+xehZBot\nBuHD\r\n=nMiG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0/zDb0dKzmfiQMKWedBIHIpESdZmy8v5ZwZ3NrqPVUAiEAq5lpQyHXSZ2Un9BlFIOdZ6VpJec5JoqtxeVI8Qq6DsE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.10.0_1570836499549_0.21116666120442762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-button","version":"0.11.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.0","@material/mwc-icon":"^0.11.0","@material/mwc-ripple":"^0.11.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-JktvRhVXqR8Z2e+QNjcVplwSaSO0+wyns9RuAhfJTI1/ykTJ5Vrg6kUWJfTdJjKtQJOkLaPVo3gcCHSuO9pZDQ==","shasum":"79c53c712275a78cb1d35cfdc4d8e899620b868c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.11.0.tgz","fileCount":16,"unpackedSize":74528,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3vCRA9TVsSAnZWagAA2vIQAIegm0xmZysx4hTJIxlB\n+2hdxKf4MszQadfsORCP5JgMeAXdtFW7IA4t9tWeHD2zMhtaOaRxakBx3b22\nGgyjjI0sNxuA1sf8C5UHyQ3AFxsnKBFL9euCMH5GzzDZJ+rOYV+tj8TVrecF\nFzLr9I99Cj/vJPPG3ALdK7UFisLy3OWUebbfFh1RP0/NxkInb+ROhHoSZ8gI\nk7Kd6KgWYE6I5OpOtwXvNOYan3MMdcAji4yT5INd+ev168VbU+YDaetEuQof\nGU3YfmQQzlt5Ue4b3wNKbbFSzJU/D8iBJy7uUuf/VV26Qdqbl604r1Na3SJq\nGWz2bam3QQIxdD4oGXkU6y99Soeau1j1KBs3PkXPWgH5uXiFsdwH1I0Yj3CA\nGGCb5QaGRFTULqr/aZtSmWPeBfCMZpVT91Q6m55WQ3IhYZUX1CiFZPyJPpVX\nFFJ32uAZHJ9Sw3bcZvRFzpKzyq+DWi9ScItSWyRY+42SofJZg9nNq8nnin+d\nrvaUkGJWKp+oT0dhUnLiRApa2f2gNt+8s4F0CA0lp6fR1WVZuUAh6Q8jcr+n\nRFiWDgoU8I5PKCYzkLy+f75wRLEHVEYIm92tN+6Uvq9uHoG+xeE6+vXMbb3v\ncsPNI0uqkrV3zDiL0WGHASe07LdftxoA2823fqRqFcoA4hzcrx3v1ws5uGKP\nQa03\r\n=+QHh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNzWelbmkATQc0twPBESaBOarXV5+/xT/5Y8YzXTm+CQIgDwT+0DIRdSEVm2kxzGX76yQ5W6mtY8RU7dOTjgxNtyM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.11.0_1574804975218_0.21703620222377418"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-button","version":"0.11.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=5.0.0-canary.5729943ba.0","@material/mwc-base":"^0.11.1","@material/mwc-icon":"^0.11.1","@material/mwc-ripple":"^0.11.1","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-5XKw8QOeCSBgeb0+zl6t7Ac5voOzxftfOIG4THDTA3N40l4pp5YGoIt+b5ESQy0568425nyNQt2n4rIaamMrIQ==","shasum":"78322f1258607f2a7dbb41f82be464888c8cf0cf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.11.1.tgz","fileCount":16,"unpackedSize":75425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLECRA9TVsSAnZWagAAroEP/2bQkPlJI7Ary8akLUdn\n9iI78wo5JhKJmwuaBbonYaDDOOuKA14OQ0jaEfJJvKQxXQNUr9qTiZCP3dR0\n57SFafbg6+e/JBU9t7myf3U+vWtQs8lv7AojKRvStbbtRPGKeVKqjN85hxje\nvKmrgBCYvP+UCJqV37DH4WZ8EmBsbRPUbAuT3J4R/3x79npBUDANoHD06JQm\nK14o1yAOKtwFx28ajbKxZV86ZSGB+3AcHL1kDXr2hH9tLhaJvjXBdKCEQ0rq\nSfdCuMYihQW7CZDU6r/PLT5clavtWUP2VIYF+8hJNnINPhmlW/l0eN5ShXTh\n1n+I7+ag8xXJNAkF4kBnNSlGT5bED5Sl82tz0AW1hpuB5oV1+RGWK+3SIvX+\n4E8DsDq/q0id+WBefhEp5EfK8wevoHjCT6tj2fFQcmyL3sGY3GbHORq0VqYJ\nsi2hgPzsv9EhdZSiFxCCODEEm9FCsU/nAbWkWmlTFTN0bCG4y46+YJSeUR02\nMSFGkVU3Hsg5oX7yeRkzinJE3W7aEOuQaD4Jy54Lw1USzuJSSZM+xJ/OOaDR\nJeoWhi41BIvdcd46ykgjBG9NtbAwppnBscRCGL0IFOxfl+oSjY/USWOfw4d5\nrhFqN4MG+gHuPosby4ddWFmHxVazAaCxZ7EoQVtvbbZcw3bieoe+OD2Cbow1\nTimr\r\n=deLY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD7nSZj75/tvn7mj8EJZsRmMimePbVGIi9BUcblbVQ6wIgDiOYzzQ+9BgFTbpSpXAkOshjD6qui3tzDIdmDDEy+6g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.11.1_1574814403770_0.6499242883630849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-button","version":"0.12.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=5.0.0-canary.1c494e567.0","@material/mwc-base":"^0.12.0","@material/mwc-icon":"^0.12.0","@material/mwc-ripple":"^0.12.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-cKSFBzmxW2cDiG9OFmv7ef32uhFTMs8ICrGDJGne2FxErTfQCekz21SxgQGR7eZ35WVMiQkvPWyv2qkonIji7g==","shasum":"a76da8b1101cb0e864eeef092ab5ce40b767ff0b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.12.0.tgz","fileCount":16,"unpackedSize":73387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkrCRA9TVsSAnZWagAAPHQP/Ai3Nu4BSqp4STM8Wfua\n+TmiSEThai4zrgapmmzXMQqPQfRQbBVu3puiEqsCQD7Z3hhrgnhw6VDrEzNr\n8Fwh21XAwrKwwdcAx2a4Q8ferKorefA/Z/kG72YVNIAv3YiaxOGl22fuThkL\n4e8keLV5Kbhzr7ne4YgOn+G47fkYZ+NhB+bswi7pjt8RbBRnx+j6vjJ1IGeh\nhCsi0foqQnH1E8Mg1JEAobjSnnsdG5SAOlSF/9fguHVmGm6b9iXK0nhOWUKE\nCKjq8AFBCS4/8yO8AMf9ncO0Az/xGjFRMKwW23urf3iNJ4/sOT/SGQ+6rzNu\nZrR8rT2VkKBoDcRdJk8e1CmhMxFsp1BTf3dlUyaeLGQBDAwiXPADuaTpfVcG\n/qUa/YeXGXNlxWNijePd6bbQs6cWpeLGcIOifv6JDD+a0BprzndrcN5xOpXW\nrbHivPgJIqEyV5AR/EMpb2cwBqicK+21ymqQDtjf5tFRgkePUqtenq+bcFgZ\nHBZ2H9M7r0Hfz7OgqwyDtekfHtgLVPGCDuX4fPkaXWkhKrYkEMl8k7jj4oRB\nRZVHxlVRDqHBTtZ3i6aWjqK54KqS8sCTbkQCgCsh3Tj6VHdH0NJZMMh6N0uA\n7d/CVbetg8Gb+95JvyIT6UDkE8ELY/RuUsOPudPZKTqDG5GwAM4D4na2St/C\nKnCu\r\n=kD/o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBoeHBozJIcqDmLoIPtFE2WopKFtxhLRChQI7o3e3AEQIga7IoV0MWDnwkwrSjWc85NniCNXpIDdNhde66B2rw/bk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.12.0_1576626474640_0.4047937417884775"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-button","version":"0.13.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=5.0.0-canary.a1a0deb3e.0","@material/mwc-base":"^0.13.0","@material/mwc-icon":"^0.13.0","@material/mwc-ripple":"^0.13.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-2ru+nkt9zHFZdtEBseba51BjPL3k1CHnn+px0YYy6o7CY5tJgJMysMVQL7L9cVbE0WyxVr59bgEN4lMedFi0/Q==","shasum":"750da7b519663daaf42809cb7674e6b1372b614b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.13.0.tgz","fileCount":16,"unpackedSize":77932,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPctCRA9TVsSAnZWagAAwFYP/RIajWvs1bdYKD99e+BC\nj9gNWXtJRSM0uNIgHTwyy0uYGunwPhmV6Vjm+teQqh82r0VLhljyuD+WMKTI\nJE6FKPdVo5aBqbzse/uoVj4zsdHfI16LmvROzCh4g636vwJExPhm6iZ7EmKR\nG4kWa0XhaoJIEhhfxbXUj8cCQLoVRXWYp6bQomRNKqnK+udzyRQDFtfwbA22\nTckOHn+OiJbkzyoRlHfQOUAt5Ja6v6f0ZDcpR3QfZ8VfZoG5Yn0NPKlF0He0\nls/ucSR1xu2P5UL4ZjswSSWnfbohEOFNhCrcwoNk6SKqmuuRboSW5SDzAy2S\nPZWcgLxLPOnArrVRwpT0KhW71R+YO0qJYNgSDLOq4GwnLxdrhmyN3cxjGoV3\n4wX+NEdFkxK44xt8H8qSSQ1lv4gP5dlBaiOtVUyVMsvTFQ2Er5b+FGDqhjVA\nMGcMGczfx56MhMBU/I0cV88TaRsiseoVoKa43P++hhOGDnvOFBuRtnfkOcDR\n6ckkkkF5QbQW5FT2ZHkQYx2Gk3lHO61M9IwSmdZFyG1qhsMJ5e6IN5myxdm/\nhLtBoqSR1cDZ6XpUbdlIjSBZOdmjZhXE6cvaXQj3sSjQOS6k4SlcokWDm8ZX\n58aTsp3bCJi0r/M0MEkgqCjBBnyZzUyblMkphZ0cH+WEB0Nq55k+dHAxHwup\n2u6M\r\n=qkzO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfA34uOntw0MCFqcUtN93lgCm2VtJi4p/MePmgo2Mv0AiEA04YmXagiKh0ZFQLyAHLyl/5MV/Xj2w54Ol6tpCGZOxw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.13.0_1580791596830_0.29938652703083823"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-button","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.781434a92.0","@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-icon":"0.14.0-canary.f790f713.0","@material/mwc-ripple":"0.14.0-canary.f790f713.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QByc+/YtNj0kLcUGCQwulg3fr9xldu/8hjND9ORsYD3jEzlnddni+HCtJk8bD9StGphd+c2wnUbgZbaUJw2tLg==","shasum":"44dc2fa121c15d0792e59ce4bed1ebd986b2718f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrFCRA9TVsSAnZWagAAGkkP/3XuL3z/3nVdpL9QkbkC\nnj7aQzKWJccpze9T0Yrj47P38SxWfFrOQEy4SfIem9jJlg4j79taCvthI5vL\nJ6Wxm+C6xfN9lJRGk8H4TwIlplYX8fZVm3o9kbhlfXizfUBPvMk2kDmCXdoC\n4A478TSQyN6n/FG7LDhqGY+6NM3j2kJeE7TPIcztl62SjnE2ESCXke/izVf2\nfUrs4qFqGQxn2/zWYj8Nl0fwp5Es8Bj4tIMMM4zy5MPCFRZeQGVhjCTiwo4d\nGOkhvA5QBBEJwkgNwwNGcnWT2D5JCbkHFjdhbGpLoGWpbTHdNIMaWVvTfVCH\nfwmhG0wr8YVG6tCN8PbK5mnem90T6cQM+x207jgKMbhFopKmjs7zLI1QbTCS\ny4C/S4eHOy86itL9RY0sBeeo2tkWZDBRzaCXytEfz7xJoAk8bNOyRoQLGU62\n83SIrsUZQxOeVNUyrt+aMm3j7Ax8kXrk2Wc3gcJHkrNfBJ7dr8SxfeklZSdU\nEZ4E8V5QO3LTYxfkLaQQJsS+VJfxFWdFFwF5AXjCDYJGGSVGhNRQnngj2qzZ\nHDBz9YCpeSDiod+GplYzW+1/VZwzalCacuz0Cli+bdeLTVegkObldeMAQMdz\n1pNuRi5rB3RnzcRn/GMoa0BcLUdktepvBqphMMOoQrX4F2H5Q2gmyJB+m/od\nxao+\r\n=Sxr9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOaKkXkBL9AopqmdEo2Dni1TqmLy+/+Ikirt6cNeMQnwIhALg3DCL1yX0hTK3+elREeNXZm8KsX6n4pNeBgbqLoIxP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.f790f713.0_1582856901352_0.0317358700791146"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-button","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-icon":"0.14.0-canary.c759cfbc.0","@material/mwc-ripple":"0.14.0-canary.c759cfbc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nETZHEBrscV6d8yQq6yY2Atju7rkgrBS6agZFV+5D+08uoVmHBKnWcDKaqzbjdxG8JOhi48XxjyA2SPVnnoyxA==","shasum":"facbbf76cfac6f2ec05459227b98ff1b4c7daa1c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaqoCRA9TVsSAnZWagAAQJAP/2KVGvbm1zxcFsFejUOf\ntAmOXTuHCyPASDKSi904AS7Xbm8tyK13RnLxiri5+TH/Ek6F+n0ZgpuCCbno\nWmFH7MgwgPT0vbRDLBQJxr+wDAZ9ODZI/aYTk3y3JTeWlBvYS43U5Nvr5asY\no4B7IaUvhp+0/Y6gOYqNK0G/KpEP8O9CWIEApf3KuEaRUKqn9RnzEHirBo94\n1niZ2oC1LmV6sSGfdSxQA9fZ6+T/SNM9T63kgvH8ZLn8UR6d7I1vFM3LEs5U\nHz6E2blsUZnMYxgZ/OEefUKdV3PCI1xfyn0D2IF89FgSGXOwi/fMAgJI2KBA\n3n9RMIJ4eJldfACvPgwKRBF9wdMSSA4ruuRqlw5D2KjKBBzUAg9fqQadr+me\nUtib1ey9t2jJr+a2r9bmhMNWr3YQkuo11YgkNGXzqDvXUPYztIfHZIRYopVh\nUrYCUy1H4X8ju9E8ZI2smVzVWI7lktYk9kL8Kyrn29mqcEugSkGnLYzWhRlD\nMAFOXZqqxidrAfRBII+mcDGgOJgQQdwo+uZnze82v2StUNz2rYodBDoxic2I\nOpditVgkGimotnsgOhgWA0CSuZTFNm6XNtX2Wd1rXhxTSyNgi2XcR3TWBPps\nioNoe/eErzEWWTGcLOiyONKz5DkPALrJULhETgL5z5RWeEWLBg+zEeq7fhDH\n4lnb\r\n=ZfY/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgPi56EmqPSWpXGP//gcIs5SeDnaydBwWCnpJSrSV8vAiEAwEW3lKIwtYL3GOUYmZiPP09ueE5pG3lFRdfDjtuE4ao="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.c759cfbc.0_1582934696323_0.11978961870687121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-button","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-icon":"0.14.0-canary.97ef53d8.0","@material/mwc-ripple":"0.14.0-canary.97ef53d8.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mtK9qifbiZJvdRtDxPd9IONNf1jyogU494t2RNRwL3exnk8pRQTMWpJQSoi8ODBw7TrEo4L3u/F/iI+2D9v8ig==","shasum":"3af71bcae2d9f1e0403de17eed9c68541c7f6b69","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3RCRA9TVsSAnZWagAAxZQP/0+2vtQhXC1G5m7/UmlB\nhR++Uehbqvo+jGeRZYVp5wgSxMODOaR7IhIniKw5zPvM9goOkOhdXGOkhUIp\nlFxkVOL5FeWiYaKG90xFqcBpt6jTX+DJ5C2VK1r8K/ocATjH+3Bcqs9RUNaz\nT+CGowhOvnW6ap4NAl0Hprj17xTBQ9vBNKITnK2a8fSWidXcGOnk5dKIzmq6\nS0my9tZlTEYVWcjEHohl2lr5bL+f8kBBFHBSzX0FUPV+vOtiNfjNdpX9JSob\n2WoFCnBWVo32oyqHHSDtJL8w4TWlRHyt53HMW64Ga/WkIVyCERXywE60kZaN\n2V7xZmUXXMhuBArFuWdcUBSWsBNQyBWTisrwRqJxkt5sPjklV7zpir8B3EhM\nG3oSAp+ccgQLgcAGfRD+7GTaI/i6o3zeaIpVFzKXW5VVPTHoabbwvak6zIVc\n5P4MgISuIoX3gnDt2PkOBdqItJA8ukDWIkKuWGRJp/zwCxa+c7Lzt0giCn8u\no5sKGHSgI9Yta5JCR9F8l2MHbAzr9sGnFa843ScWf+qL9TLnB0PR5n0mxV03\n/UDBDRpIb9nospZaE7OiiaVMhyCMjXQ3sGanahenZF5xab34D4fAlPFKPD1a\nrBXw69K4cZOQ8EnZE7eHeXk+o6pP2go8TgLOrvyCsGH9xEoiODevvy0QVxYM\nfuMO\r\n=Jc1H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgxn4cX8+vH+ITuinZZFRlFjLrVuBh+oTcy5wdkmHeKAiAD4TBGqDP3FsdtaqWVKLGTEZ30hU2DOvAdp94ICXzO3A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.97ef53d8.0_1582935504680_0.4802091383370337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-button","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-icon":"0.14.0-canary.24f5fa6e.0","@material/mwc-ripple":"0.14.0-canary.24f5fa6e.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LHfW6UFbzrHagoeR6ByXyNJ4HFZCayO5SU93DN+4Gz150q+2by7sx+wMTQO5xhr4aytstioBSPmwarDlsJji8w==","shasum":"4e0a0c5820b300f715fec08235a2e75dee9d9e63","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmgCRA9TVsSAnZWagAAGE4P/Rst1gNL2adFKllL2ifD\nLGI9V982qmTb+poDrzQ0acDUdQrOIajNFdKYM+H/st74r2vp9bXEar71ewph\nZCX0yEjV3vDBJaA/7vs35UqhN4h7wJ+PIXZbKPj01ecGdWl0WqRseYkscCMt\nSx/vxcPIbnRXZK7gpQAPRuv8uQw5ZPbtvVvINrjjfbJOxFsujRyyqPCRsJBw\nqBGH2gAJ4sutZ8pxJKhtFrqd3IDpRDN4ljtwO82oEOrz3d4BZ3PstED37d49\nAIdKmuUqm/0Jg3kvrWY+Y+WxxpFHj2t1ECejlngU8j2ymuvQFlYy/1cwl51I\nKlMfomUIvcf0ut95zbrlGQKz7CIwDLmqrjNGeW+y/BguRFtBVnzkvVlXubi0\n8V7krKfV2hEOflQsr1BNdfvAUUrfae83OSV+iSBmYXcv6hftXNjGRKzdvyc5\nYqP9BcTsquALL5WIoTCTEt+wf20wVjeNGdjygtnCTBWWdI+R3ohKpKNHNgB7\nz3MKbjMlk/3HZgD/9gEcITb3PUiOHHP1NFCcn4vfQPZEleEhlpWXNYz5v1Ft\nifkpKavf9hPChKnbrCiMP0iA0cHfFbiJ4TOtf1us/8Oa9HlfcJEO/8pxpFNr\nzMiKthTGNRMYw2qJg/nNPEW/D5LUtoHze86XZXD8DaPWKhw6X7zUMgQ0z+xQ\nz3u4\r\n=XB5L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5k8EK2s8Us7jXvB8xtMYlqGEyYVgMLLn+BR4n1NAyTAiAX55T7PAvYhcJRre3Y4d+emXcWe7mnMKQSuNme+ZjafQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.24f5fa6e.0_1582938527821_0.27293935577036965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-button","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-icon":"0.14.0-canary.960e214f.0","@material/mwc-ripple":"0.14.0-canary.960e214f.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for Edge and IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JX7ep1Z8yeLxGjPwIkIn8m+QIuiRp11dF9PVll8dXjSgJU1XpteHm6wTKjNCj36hf9D0tqUuGx8UcxoCwehghg==","shasum":"0417e35ef792529b5d14ce192620e438df40b7ad","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":83166,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXVCRA9TVsSAnZWagAAW8MQAJDu+yLjT5Akv3DEs7mv\nmfx4WorzWnzBxN5+Q06AeNYbOuMjVYg6FFTZvN9j5VIqre9YO/vq2hP0xnMW\n6l4srtCd0za87bezP+OfE8QX3C6bh8wdf4TpX7PI9dDs7/upJS+8s44vv/tr\n6Y8oKiWbs7ZrwryeH5YRWfNP/YyBbSIqnMQTqFC8jaPgniGhs9gHt2yD3H7H\nbS23Od+iYsyR7OsldKP4VTC8S0l1xlkr9BKMDvvI5+o0/6mOsX8L1k1RJJBK\necoAufXF0UKHXN9a67TT5bYbyhXeUOGWXCM4lDRBt2y85h2juUAd1U7fdege\ng1Fm7nndghwDNDZVquioJbn8Xp35GSFMb+M+sAQQqVWWRy5aO6pPYioRCw9M\nXZ87gntauGdHqjF+l2UH2AgmvyTyhP2TCCwXAPskEqexZXYU1kBIood2xX82\nv3hgoDrXjXgb7t++4qKUXlxipkmM8frf++zA5mpH+C+H8BoU3smj1eglZqqI\nE9Hme1lo084JprZ8Xj2lqOQBcR6/n4zXW5+e/SdZUyidSXNs1Oicw6gbpb+m\n1GRkddpRphiNydEdpu0+dTFpZ5fmJK3vpQwnMb4kz8ybBKc5qsNJUQGdK56D\ncCT8+5ZKi/XTCg3mQEdk4hszSt8A4dpXsZ2ulgE7KvACjhKPDVKQB6KSYcEf\nPiMO\r\n=haLf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7pwRPi3RjMQdsUNQ0Gm6avJez12V5tZfb9AsPeZXzWAiBUL2TG7jW9242KpE/4YoV6ZizkEgsMN3LhM4Gyq9kStQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.960e214f.0_1582945748901_0.6924069739264842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-button","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-icon":"0.14.0-canary.a2f046f5.0","@material/mwc-ripple":"0.14.0-canary.a2f046f5.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bbsIEKJBl1M6IHhcvtcD3SoV0yVdpNkR+R7iJb6KsnCUBKtnVtyfW8U2fplLRpN/vrbYPOf3azsyplef9bk1kA==","shasum":"20b703c3da083cbed99c1c829f3d55ccb6bbb863","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatKCRA9TVsSAnZWagAAfeIP/Auo5cTu/gfD7fxkiw/4\nWh5gW4cfbV0fv5y3hLJSgwTmchO0cqTpBGQDwS6+ha1CfE3yWp9R6cUFAyeH\nogs+bgUH6AZC/+Qq4shwk6L8wQxsvh+2EPw5uat4PJgl4nm1RoUEcOpQHhk2\nanAoERrSLMPpFO+HhvIXL/s5iRCfuBLMQttrkmonAvazPqBydrVQvRUulfM3\n5BDj6dk2uBrjOxB2B+xijjxbUgLNTUYmlkQFr3Ztbz14fiwJiQJnWOWNZZsr\npzdAaghmjW3dNmm501TxYoy16GYrYQucWa2t9YGSjfn6b41HAGTzxMZ80ze4\nJam7mlsBgPCLgNn0bhAigpVPzcWtvr6GwpdchIPRBwc4jdNwTMJo3IgqppMi\n+js6VYuf3rqQiZOrQEmn28/zwb0nsLbN16JdKjm9pygGY55YfEd8g4w0SRye\nbet2IS+nXbRfNsl7heUD25ZJkbeXYfMz7jjyTtO1YPb33TciuvXN6VWb/ITr\nxvhqNiQncDZ667nzhJ3lcdzibaq/kALYi1i6XsGFxEhZYoTplHDDL+J04Wxc\nQBPy344qLHTqxz6Y6Io1lxifw/KuT3cKaZd2+aqq+M840m1etAuHks9+G4oL\no/2FH511jEUzSa3zcsi+D3uBL9hoJ+BUUkTCM8fOfQTt4HxDz0FFx5shZWbw\n89jg\r\n=1ufm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTMqvDX5s5qJ+DrEWpsDmb75xFTti/RQQ54F8xCoKcvAIhAI4DcgBrMfZ5n9J/r0JD/adTr98aOlPNSuvAlUg4FewI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.a2f046f5.0_1583197002110_0.7583057794448143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-button","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.69edc6e28.0","@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-icon":"0.14.0-canary.024f371a.0","@material/mwc-ripple":"0.14.0-canary.024f371a.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c0QadaT1ES57lCYKecgx6YFVWRHycwb201XlWoT/HXLniFzM+tAOgrn8hUfWbN9fZnfUMeyZqiY6L5vH0sJR7w==","shasum":"5ab51b2ed1405a91e28276c0fe703a15018608e9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLaCRA9TVsSAnZWagAAnFUP/00fV741aIibqbAQTwRF\n8jhsWghsqcmlNKcbErPRvz3XHb59FUVUUFa1kQU5TQnP+91XNuS4zvEquvLB\nQd5ljc6F1wIquOQP4lFwQ9k24uZHotMbYXBqYS75samej+4o7Lwv+e2lClzi\nTJZUMcpjd5kpwj74snq0cQquEDr+jH5QBmuk901gbaYB7605mHzrtZzK+GCg\nr151MSz0IyP9zxmBpm2VDA1EgZb7XmUveQry/spzvoWPI+ChdoIZQvfsyQEF\nPMHskzzYu6jepgYdvVxKh3yWUqekB0+Mea2wM1O+hWu8rfDBjNgY2g8OgkQY\nFkEH79FBQQ+un0vv6NtOPV8Xxbd48LrIrWKoQnWlT3fnHvJyVAC+wpiTmobr\nxPIDxQ5zyVdrGG+8ZPQTIzuo6sKUV/kLJuhl9e6VJRv4goAIOPjqt6VydYSh\nkngQDOW5tKfuVfgqd2muUAlnXdM3T1wZUAp1KA3eY6OW6C6UKN+C7HZPrupm\nESv1PYdzFeQy+AStJHqqv9kbLIGCdw/92NyFAAd5dywd1go/PWaq5qhGjFTw\n8FMHnl14y2hgkzvVJ72zUlm1HQaQ5PkXRCtraBX6DxqkhZ6G10hIG/Y44klV\nwt2/kZxkLRiHZ7gSkrtdkCchsCKh+kf8lw0b4cxseRJWMVGOgeOES96/WMfQ\nS10l\r\n=PUY8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/u1dAmS7kw6uPo7kBQffxdooA5p4f2tg3E2XEeMtzKwIgeuUoVj7kRFJ2ZurwAFElpGzOVBuOZNWuxD2R4RxqK4A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.024f371a.0_1583198937668_0.21836981158496727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-button","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.9372e4939.0","@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-icon":"0.14.0-canary.2f164110.0","@material/mwc-ripple":"0.14.0-canary.2f164110.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-anynMF9fqn0kHHfnQZJgNMhzviWjUyo6WsHRChGG9vdmIXlQNgI1v9cNLI2kH7QB1kydIYhqTo635F96bZ+f9w==","shasum":"b29e604ec07380b9d3e5a67a3f504141321b0892","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1BCRA9TVsSAnZWagAAxBsP/3G0sGNy2ab+QCoEqcb0\nLciCOEMwigOLU9yT1dZMlDaEGzvk9h13CFvfDrS1Ob68UVYSsIfIis98tiTi\nWU8kQNERW1NbYn+n4T+5OB6tRlcFAN8xViqXG0MPZ5Y4aclibs3G+xw8ZklD\nyOqg0fO5HaAtD8QvRRbGtngYrOCRI/ZZwYH8Ktsm2AC+V1ptiZZCaFDgrn4b\nZ7A93vq6lOFNb24K/hnZ2rRCQDhdx0MQHTYHSrGe+09N3+Yg/muA3ULCfdJX\n3uZEOsS7yxyweAyHlScT0rSoP01vhg/w/HlhC1T7zH7oPxk/n1Tn310kzCso\nh6wBaa+qcRiseSSScDP+L0aPLb80AzWhuvJsajQqZaFkyVo6uVGPy5b/TYNJ\ngI7GOPikKjdXdct5nh5OsWpLH2tSfqpael5UXjib3/YW8tdKqKrTFTMItIPm\n1Wweoub4ud+DrA4vtwQhH8T0kcbChEfM+V3cFOKY+gwWvQoRbdJTc0KNbYl2\nwCYqp4a6Jlp8Bbgig9yge0WyBnu+IKzUob8iutNCXln/tyUpVS2P43p9ST5G\nbA/kFc8zqr4g/QLrXwlVouhgm0NgEvSGYA67rvFAR+9ZsYdhaqQ3E1R1BnbY\n2Iqd2gzDjKz/C6wBGcV+iPxf3TJMy+ugKpucx4fylQjy+RZ7VBLHhIe7SjVV\nTM53\r\n=Ai9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGkWk3tbpFhK8BIcRDJ7kBl0m7FooBJqgxCvZFU9zcNQIhANo3WeS0OeB9JoC+aKkH7ijScKi0yI0JIl6xR681Z4Wp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.2f164110.0_1583271233474_0.018654059220143404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-button","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-icon":"0.14.0-canary.edd465cd.0","@material/mwc-ripple":"0.14.0-canary.edd465cd.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RO3OTrXio/5wn/Yu4ig8Jmrt3R9swc5X6ZTdYWgl2wrz6wrN8bY5j9HBCpHXuh5wVsh8pqOAF8uXBJnZvuM9FQ==","shasum":"5c8a79d8e3da0836a722fe9d856e08ed2aa265f8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIICRA9TVsSAnZWagAAhyYP/iSQPdnEaCtk8deVDRBf\n3sVUyxAjwErJCIiKV17UsAYP8BnHbbaPWJD19lpXJRoRrVVEt7tPEh42H1hB\nIiAiCg75ZHocc9lxRl9YBiH6JguvVg1SDzJkmhApBASwpDBZ6tCWx10WVyvr\n7uVLM7Df0zE2fEvaE9fPX8cGN9gWs8zkl4cTd7V7yCq+32Eyhl8wtHhilt9g\nybnn++1+3DsJYo3nu5vXG2lY3ycojetk54ipH5NwU4mhaB4E3zGV0v3HTmAw\n76xCUtHooZTQkAwEWkez4NvWRr/WqwBbxpgWCrvZ7T/sAkCxKJ07KOSh++yb\nNkZK4pAK1ckDiL08+QM8uugGhmjkNfx0IBYQcrXJisF2W5/J3juuQrf/TReX\nyRTb+yImpbnRKqXMdiZyS40Dms3c1E1NzT2AKDJkuzKtKSSuk/6ddH89sltZ\nQCTHAHiKRzN/3+3hXwHra3s5EpXKCz7CkQBPkMnDIJpnjUi0daxr3sDJGSI5\nwT7QyFTP/dOtPuuJlfoedPSJi+xrzyrSBHBS/X/9h59iLCfk7DxVCo7xYxkC\n5al+9CZu7r7Ic/HutVqY5gwxnENCJKHroQbpwKnRIPjyTWwoW/HhFzaoZE07\nVfVzpyeb9NMRg3uqzZ7IdhebkaYXoTvJs1ojL5GIPQrfaY6FrkT9trGZ779L\nkNpS\r\n=8OrP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHmS3cW8OhvcId7gaMR6oqy5LNkX6+w/pt2NJ28obsMBAiB+EpkRPb0+IvOGAwSId3wvTLB4Bxf0aTYS0D7NiuYnyg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.edd465cd.0_1583280648577_0.03942001557343433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-button","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.9cf5e9842.0","@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-icon":"0.14.0-canary.2b02d017.0","@material/mwc-ripple":"0.14.0-canary.2b02d017.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dzE+5lerMPoQKT9cDMmX4ZmQAc4t9y78yIm69xEl4jGbiyRrzllisn6uS7JckxO4HIM9XQ/uY7hWrzLI/cJiwg==","shasum":"525fe78be8861cc0689a3d4f89003dd1eb6423b2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1DCRA9TVsSAnZWagAAqocQAJGjeMzORBM/DNQLuo0W\nc84GkGiS11fe3fpTtBZ/qgO97imHpOdEpjOBXJCUvQUJ2vLdU2lPDRELgAfd\nuOT4wLVv3NWvqIFA+UqjpQJtRe0UCXH3HeeHY6IBXTjTauBZqJC/nz9i/2U4\nE2gXHzvNM1/0IYmzbaSiBA9a+rmi3eTefVn+D/ifX9PrMTLEBTH4IEQYAM4u\nrMFye7nhAa4sakOUzmF0Ckjr24kLcXzTKxDBRq+aKLPnJ2KO0m4DXr39kUNX\nOWtRzxUCzRC3uWLqDogotLAG4M/jBrYy54OZYQvjH4jtOELjPQI8vafIszoP\n6spPHFTYjrlHkdiL5zlhQjC+z/FmvsfzDYUJkPvKyr8a9uyglH6opetrXpIX\nTUvYhhYD7iZXdpbAXEBhRjjXgZWV7dbCYwW9BZBSn8eoVM7du4twpB3QO9+H\n9edapiBJ9DhPYRYCu9Cjh16AsS5MssYrUC7d81da1iRNGrnA6kZ+DcBlUrES\noY7rJ9AGdHnDyh5YKp3uZw/Ap9e0hweeRDKbcOU3PCTuQwflKo7nbVeMUjSm\njrGUNNEE4ZbnQcxgH9PuqGv86xTCfrQWwqjnU6dwLhlUhejIHboLIScxWP5Z\nvlvxV7qw6tHMpmMwz9h3CUJriZiOsclyH7qBssp9XtKNyHA6m+bk7N/8RjZR\nQJeD\r\n=CGYB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF3Tbr63ZM3UiTcpbwfdo/t+ukkM+2b1EGJarkWFSQSHAiB/HZkM9Ilyv00dZ8xh7Q9flRrM+T8xzmoTU/tiAo3AfA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.2b02d017.0_1583353155034_0.5104004060162075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-button","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.3657f8863.0","@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-icon":"0.14.0-canary.cbdfe453.0","@material/mwc-ripple":"0.14.0-canary.cbdfe453.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-249su9uj1QkrKdt2d/jEz5gDk0zIIeLGsXBWFoaKpEeprSWkwhE/c8oO2STz72KUDAWVeQ0o4s2vnTvk3QNm5A==","shasum":"3a7248eded2fbfb7e807d1db67b2c4c9586b12bf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFECRA9TVsSAnZWagAA3+MP/iThzQ2+hhBRWc7ae8qc\nQd1+56jm3/NHk3ZEHtfhIo4v5R7p8LxJGFlITK9xifCyyaCtM0uUjqBV985c\nEywya23qpYmg8ZGiZYI/2cX9fTh+hpDo1tgy2wFPNBdxgIFfGaWSFPZMIsCj\ncePDu83LmgB2j0kZEscyCtfw3kftYC9eAWnFu/6F061wn0XTE60FLBamqEVs\nXd1GX75wq7dMgfzCmFgi11EgM6ztR7hqOjgwR0btPmueLn8En5iGaLQtCkl2\n1t0OOHoT52VExK4+93GD4VNCdNDad7mVDtN0zlqHASOTw5M9GTCxy0e3Cu2p\nbadZAcqIIRANNOEjNepnOqh58zo5K+23v+IjwvLVVxXXqbpBsL/Tmh0V+EeZ\nhO9PiPMlJ4adGl9J3d4p3up3fceo2DM72aC+1qveWv9duS7uyd0ahB00etwT\n5V3oZJ6srITsoAJD3kdmRLiY/OuFeNoXATSHmCkBU/Dcg8HnVtdxjf1HHJMo\ntpnMH/ctGURHuNhAsihc7H4AV42s/+jx0FGu1lsOqFxydiDPpIMN3TrM2wSE\n1orwUHrR2wBgvYNsbERqxooPIN+65Io+4Tpc+faLJ/ZfNveCmiZYcOgeCYDK\nEESl+flLrA6VqhtIbTRhnVrbcG9GkwgwE0hbWybKk1xaUtP/Y1A0fxKKjY0t\nZwtI\r\n=sRsb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZ4G2Zr2gfItMvzsnowLFTq+rDWt3WUEwhlgqCxxk+bwIhALQ79ai/i04O/Tc92+4sJ0t3q41+7/GuSgy5/rh5XH4y"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.cbdfe453.0_1583358275852_0.12477445563051881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-button","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-icon":"0.14.0-canary.02aa8a98.0","@material/mwc-ripple":"0.14.0-canary.02aa8a98.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-c6hOcutjygvFVt2S+4M2XYj0ng3hZank7uqt5IzpEYmYc3cU1S8i0OQyTktzP9N4yOze1mxugef4TKb3gPwSMw==","shasum":"4419ab36f2af5b256c0f5fd210451115095760ca","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtRoCRA9TVsSAnZWagAAWokP/ROpr0AdD3reV1PJA7sS\njTEZrtl88hjLHH7nvvXzx1zkn2xTYj4OzHJebfbywjrxl1VxjeEb5QcL9KUi\n06abLKPp25ubhNDywcWVwNAi5PCWyK6R5VtIwSWWYKu0I8tC4gjonRcYA0/u\ng1Ri3QbqYtKGzz5MOSvzPKpp2UKk4y9iGHmlWmsx4VR/XZ8b0qSjaj8MftKZ\nj6z3hyjGq5bPHdpDO9FCqM1Uv+gPJs0m4oRYKE6zyI16Vrn0m9sPeu34nyyR\nnL1jq0ecf7pVXc6CtNiFerwOQSzi8w38KCXkKfrsbJuwBhAr+CCDjv4okZ8N\njtXQiSO6iEtRhMY8rz5j3wO9ijdJz+MndxdK8tj7PgKkLiT48KPSSEK2oJqQ\nT2gyMtrN2+QoadhW42oWTQL5b76nLMgqKvBLi83s8JQsgm3KaRiBB6xEMkR0\nTznBKTFekAOSw5NEn4rgFSkIoTgItHyUtlZWvNL0Gw0c02AlUX+WrQMY9vkF\n93big+LNbgo8/12Y5A2ySDJ2ZEeW27907GWD+sn1ptx3YDjQm55Jf+VSaY9M\nr1ShOA8gp7/Q7uyy++vXRCI8JmG7uiYy9iujty0qFOpbCS2t4ZqovGI9PMxn\nupToQpu8SpNRJ1u/lt7FsHoygVhT3deWpHL5bXmH2A+jO8BvAgS+eUHSNunI\nRM1F\r\n=uhh5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATmurrkg3rYqzUtWoFemL2Ih2Y7CaHf93XOxSiUREEcAiEAgwRKGtH92sldp7xQYvtVQIKiKPEBhst1NR6XqMc3PAE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.02aa8a98.0_1583535208464_0.052726786469110776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-button","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.17b9699c4.0","@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-icon":"0.14.0-canary.7cd5aad6.0","@material/mwc-ripple":"0.14.0-canary.7cd5aad6.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-13gzcBHM8l8lDIBFAoKRP6DwWoTE/Fx5L53uR4ZT4dj8WFDWqjppvJiPy6vRtUjCva2d2Xxi8KP9UPQGTNf+GQ==","shasum":"8c7b659829ce13a56856893ee8602e05a35674c9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs8uCRA9TVsSAnZWagAAfZsP/iAv8FrIp+S2OvCzHIf6\n6piwHuwKSjj8K8cIP+QOEnPHG1nwGhan4bxujnEQJPTnktsUQP4LWm4A4s6j\n47Pp38c8Ho0B+uod9TVu9JKtv+o2Z6+VoczyXAJ1oAozdv5KVS7EVgpEWTyn\ndhC1mn5j6rDLDWMYM6xEXgegUl/3URdF4y5pz/eZ4NS+BNPpZm2QfTX6cFX9\nAOLcjQxjTJxm0HyNosjiJw9NWLBUkmEz2TtlrHUCW4sEpgY4oZ1ClOxPx20Q\nYrM3fIcPWiVbne/egf257MrbhjJXz5JjsCHJQzlf5lXZ6NcBCjQVxiregzvY\n9i16TVk2KUoUZZ3n5iAowr9D8rPRsmcEogCoI5e+3oCPosS5SN6eF67VyQ8G\nickBMYFArbWsv+/ozB2+NxqO6Fwp9/ev4fR5zIGIJdIQie0K+JEAIWyioh4X\n3TmdsHKxero+4UzIzXK5GffenG/deZxe60gWiBe9x6pfjngMg9l/vypa7kn3\nztOnxCe5sdmh26yi5Etjht3PkMTbvER23zMufoQgF1Wn4WtL8nWH+U8UXP5z\nahSp0RgdwB7HwPkKUJNNJsmQfM9skdI3PsNPy69dXhs0ce3GqQBw8oaHx5d5\n/xY+CfKhSUm2G/i77J5fAsLAbmh2IFD7IMKjnbIe1WizYRWGU5OM2iYLI6P2\ns6cm\r\n=+R5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICH7DbDfFvuVBgAsfA3CFHJ63BNDJCFwFt2v+WUELaDQAiA2K2rmNC070yYDPesks9StWFjWmHvlMkS61OmSGWSJVg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.7cd5aad6.0_1583796014144_0.5126499364229611"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-button","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-icon":"0.14.0-canary.3a79dfa6.0","@material/mwc-ripple":"0.14.0-canary.3a79dfa6.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XManCyyhrv91TTDbLNZs39+50MLh7vncN7BflSan88kuJvrts2QTFBfgjpoqelG+iozpomWDnf5ZzOb4qgbIEg==","shasum":"87073b3adf1d0f0c66c79cb7b63ece7598204351","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHSCRA9TVsSAnZWagAApmsQAJ1KuLIa75J41zH13GmM\nDmxuEY26gG/S4Al3PEU7DTMT6+gzAHqzhdTfiCCromw87GgY27OxGnp2zyY3\naz3WwwRS1SaMe21fH+WsB+UPL3U7MPRwWkVrC3lFDv12yQMLIo1Ap1FqpbIp\nNV4b8LDzNkI66pq1OJZWly45QLK+8xFg7dMAd1nnRyGhdefz9tRI+ZZpI1R9\nzJtJeT+uoLc0CDHCqY3p7E14iyQg27tL7Up74cTdrY4qqP1XXbhtoOorlRMr\n1LtZU/TCseGvJbN3WNt/cmCTYAKIGKTD9sQaA9GINEzWM4cicti7wf2hvV6v\n5ue+igIX9wWm0Z+LoM71iUxeb5aDl1wYJu7W5SKCZyQzLtYY/TESU9ofc67e\nWyhJ6Vcy5N6sPFuCh0U0+lZTibiz5zpU9tqZiFROtuH1/fJxZ8VxDYBlNS+f\nDHK2dH6JgzOSOlFvBwrLnhO7N818h6/7yNHVaEPPjuvh7utkBVNGOJWrDQt+\nWNfa1dh4E+yW/lOlQb+U/wz0ijZCXR73PmqvaMAp8oJwgbPc5JZhIv8eiaIh\njf5nci41HD9KBYiwfZ4XXCzS1xLKeEOgn3SoPKt9qbWiYLlKLl3D6ZOEdasw\n3Ba/eW68sRRPbTkFHAy32qzZkb3tSxlNwOKdyUCgowgAMQZfaE2uFCXty4vH\n4Rm7\r\n=d14G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/wa2V1EIcTMExJwRRbHAFatZWrXWwy5eSHUidMWByaAiAUgCOX3wcdIHOet3EK5OU38bmZ9EuRnDij1t8hulQ6kA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.3a79dfa6.0_1583808978520_0.6622443336833035"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-button","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.bd33cb56b.0","@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-icon":"0.14.0-canary.22e0f5c9.0","@material/mwc-ripple":"0.14.0-canary.22e0f5c9.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Yi8PRp8DvacjPf2lOxh5ReGyiP3teIFuvy/fzZQXAjaeTMDKhFjPMTHLo3g803juPZKVhepsq12V8a/gXewgGg==","shasum":"7d7707017da67c513ede1eb70e0b6a756af12369","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLECRA9TVsSAnZWagAAJWsP/0g9mW71V9C7PM5YvXg1\n9X+OVz4ZdfQFaBcg8o6a5KWvcfc+t7kjfrGzZUCwidKUCbi2hXKbd1gcpyoM\nFIv6kvFLcgHXrTE1hIheosmdNuhEN8OPOXyQFMJfgvh/hjQH3rTzQAaVRn+E\n5wNLG/z7+hsbS7PEaHXv96K7Jb6mNm0t9Iw+7qwuyDBbmKbNm/SfjX8Qug9+\npz17CbgLBYk+nLoNVk9InriR+lNgGjW/VDBKCyXKYLBxU6yi/Q1ajiaavdmy\ngnEK7HwCnsmYOfEw0R55/kzaPKibaqvikP0+6+6QO7PGlCU6GZp7hJFCVElc\nMpbCLOYcMhJvTj5oorrSLzzFXPsxP+ipLmj7vLZkWBOMEnH9teUbfk3uROkD\nvS+gAJCbPrgBNbnTPwtoXZYwlicYD3MbfZ/0b51y2PQl2yT3Ny5jS40PTCzk\n1BCo4ioagbGWbsFKLmlw/cs45cmS4X3mZyeuQEL49L2Q0ug8sFrjuoowjISD\nZeePHn/rAyr3bf2OrFVR/b0ecNIBLGJxifUg0FeTPQsbpHs18ixPaKMirmfI\njL7Vh1mFB0iX65WACi0bQnnItXdQqtyMe9JPiw6MSBNlQgKMIk8tfKFIsUFp\n8v1iiOdg/0o3sEW0nlK0RkUxg8lG6QBBazOcIuemki7TZJGaTJEVglhRXTPp\nYNlm\r\n=7IBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4aXDB1OZ6ltV3xVBq+3Zek2RlXYfw5H5etr/DbGC7NwIgQetDdchkvkCVFGdU4mSIz4HudvoiH6LEDbWZ/c4SMh0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.22e0f5c9.0_1583809217972_0.2216921709635451"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-button","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-icon":"0.14.0-canary.f23a1d1b.0","@material/mwc-ripple":"0.14.0-canary.f23a1d1b.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Jl5ZkqstyHvPI676ZUbS2/QHwar/1ukT/vA0jwTVCq1ZuQ5R6lYDNQAGNxt5+HB0LFTQ6lCIKD648GEDMYy2Fw==","shasum":"46212df3143fbdd72a88143952b91f6d52af9cd4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8ECRA9TVsSAnZWagAADNUP/ixrCeydrQysvL7iZ/rB\n6g78Q6AZBRCLYK46Z1pbS50VfdtVwAJuZZccLb2nHuXDYnpYKJUTc+/BdGFx\nI7BGx8apDf8smTn5vt4LSEMt6qpXqCI2kOUfNzfH4pJ7kwf+/ypOCf2Cs8jA\nskbis5665j+tWDEpBbnA+Lo+PAlk3OQ4/33mv4FByTe/7X/ukoQr3hELV+Ly\nnRxOxAV0GHEWdHvGUyvhoV2ut5BOMq5BfS6odNUKg0fIsGRIfJLSTQDqvq+m\nZ8Ll+PguibnTpqplz/kx6im29NMqWIeCx+HrIqHO3tqKsSLrZZnlcDSRjd1q\nOzdP7PQAp+F9QejUXO+BQPB1bLUNqlSKwZDnXIbP7XHPZvKEtkqDEDvejaxO\n66Px6FlgvWk3eRReQQ8c/3WwAdZbg+YHamkUzZ9NwW3BZ6KeQOgX8+T5v7jL\n+M2RZY/UyCiSE9Q0WQJ9D9BEUaY0Dw+6nBCewCNTCxZ8ugiqkvEdKzECSbj6\nj+Ykkg08Av8pH4gpNo2tMZ0SR9Ts3xDy2BLoBJ21w02dnfwzWBZ9+k7JjY43\ncux400wy5soXrDVjTkUnkT8a76Q92tXCUioLMaspwva6Pd7otfsDfVgoTCs9\n+ZXtomvaoW/fulaqR+zemF9l08eBqtS/hU+q1pRohZZBCeZWSWMh6CtN9SX7\nmRx0\r\n=xHls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBJPT8Hz9zCxqMCosqfkk47/qNYKRs1Kulh1Yk5YYq2lAiAevWgLCclhuqoj3VhdWBpUBpYBolFycHr1I8SrZTZGwg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.f23a1d1b.0_1583873795704_0.031927336155997965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-button","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.26c049afa.0","@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-icon":"0.14.0-canary.34b2d69a.0","@material/mwc-ripple":"0.14.0-canary.34b2d69a.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X5RQ/QFoGCjQcGkiG0OBfRO6xpbuAl+EchA6tFbYsrNuv3g8RX5aU4cM+z35tTfT3qIJ5nJ7LbcorvnDXUk4HQ==","shasum":"a0b7ac0726d35d29d75d76302017988bc225691b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANJCRA9TVsSAnZWagAAYt4P/ijx3yXjZ8ns9D/WUbmm\n5QoSXs3P6Cp4ZM6ybIbLdts+XwF/1fiJm28CXLadfMgHpxEQMIjtskTFJDop\nPQTO6EhRP7KRwiCD+9YjCsinTDOolqrAj4wPIq1PTcm3cyWuUKKYbEwEFGuZ\nVQPbMUAD8Ch/waEYJ9ISrgDABirSpIzdBGhu/TonHSuN6vQIjJF5ZCgof5Vz\neN5gL4LvHstH8ZgQkRx8NoIYWDhr4WRgYkdYLB7fd+sm6ZZ7lDbUfd9xocxJ\nj1ZhV8yRC5soVSVzOncqRmNLIy6HDPRcmkct/z42LyiUPTKYJkbmzcF7LNjw\ntCXgmVMyOgMtLoAhu3EBWsxT5INqmawisnzx4Kzo2JRnR2llGkV5oRBSx8Mj\nSq8EvMWGsVKA4jBokLHI3vv99luPBCeYf9OAvkboECDJqjfxBWqmDVqe9BbI\n8ZDMmwdy3Z2Z64GUXBNccqcERMwYhm7UQtlWtu35mt791ixr3JRE2kCI6Ho+\ncAR+zuDvTQSNn6THOZSTtAra4lu/CDlv4wOaSlVgCA1SeIydFb/VXdwCU6af\n378MxOvGCC6ziISyoTmHNtRJZ6k8okxlBnsiiBumZ7lNAd1SGkgKzE7F7VT2\nJ4g0gKSuLymFAuXV29QdeXFxEMcYSXx4X3OtfJNv1qWHtvcQnfIb5nSx19Vj\n9G7V\r\n=+Ved\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsGxzBbSjrfV2ltkdEnkfYuiMB3djxsHzmVxh/YljFcAiBdMGMek0nZC9iT3BfWm1LTOsUrMpJt+y2SvR8UXqNWog=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.34b2d69a.0_1583874889561_0.749387733332008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-button","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.1db5c9fc8.0","@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-icon":"0.14.0-canary.dc04abe1.0","@material/mwc-ripple":"0.14.0-canary.dc04abe1.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-L6/eqt2oEHltSJK/0pnhLbkmee458EA3m747C7IU7yM9PQ1CiQDpqcdRRZ80pA9SxXNxkdqdLHNht0gsPjMYzw==","shasum":"6bd444d475838a7a0fbf3727aafb7d0e73a0ac5e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA5uCRA9TVsSAnZWagAACQUP/1ZQTTjmBaMEcRmA9B7n\nmDBKKw/AcyFgZ8i5f67AwVqSUo8kLZNbKHMJHWVqx4xpg0ONm3kJFLrK1sGn\n033UhJIl7KHjnM+Dd/CM5S6GaDHwjtZ7wB9WwGeqSljp0zhWae0dQ/loUSDL\noyK118NsQNcLsAweAvt/tJpaXNlxfPPH4oK0F/8MTP6IKMeeAtF0RzS3NckZ\n9rzA89feJKDEqWqYX/5yMlpwFJHMBGniAc5sWUCrZEhZ8lYXYWKcYqZ90/G9\ndonfqQ+05hNhDoaL+OR8e3dRutHO/acqg+w94e/9Cu5eJVMkOl0AEubqanbY\nFj+W6SzzwtnflsQ/5z5NTyTR+ATogKxZE0cCrDnr0U9ZcbNi8ou0t4VoOBFz\nuT6X315C5CVGXeSf5ztUlE2MNioftGZ9iArkDXX/cBpFY8pQ0JqyAVZBgBvP\nDXtQ6DWJGvaiLHhv29ZTGXy7+tKrbXJ3LDr7+TJF0Ii3FGx4Y14KfPO64qMe\nmX2OrQYw5vl4SLD5dQ7b2IIaB7yUlfP22Swzhn24e0NKVjBUvAM/nXzttWgI\njqLMa1Tbu8BEhpPBcl95TZYleGmTISSQgmSgGgp6QlUQrkMS1yImz+nW0XIn\njCqRN6KSI+qorDOFIKL+sMqZAVhWIOL8L0DcC6aEIatPd8kzPVG2a9T2XYa+\ng9Br\r\n=eyEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyuU4kh2u6U1CCiIHYFW/SBom01jUYRHakzXgTOBfz7QIgTOJIKE7I3IRxIuMFJ55yC4Kq6Li/dqtQM3VItN11bu4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.dc04abe1.0_1583877741724_0.37355151526506525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-button","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-icon":"0.14.0-canary.04ccbc88.0","@material/mwc-ripple":"0.14.0-canary.04ccbc88.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hHyviIVKuDZv5qYaDUE6ghYvNCvvNId9pSQEhByCOk2Tn/iBhhwAQrYjMs3ZIUMCZRmEOH8xUL2+b8Q64HWqKg==","shasum":"dca8874362ef1edab2a0654486fcaee6c816ccd5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDIyCRA9TVsSAnZWagAAXhIP/1hWKSvgCZ3BvTQrbMSN\n6qVaK33gwkYqB6r6+r8HeLLAQm11MnnRsQjH61bbuEJBmijzFq78NHiBisos\nAeySHjiJ5uGzseW170mO303oCdIHcQJqQR9C2UtfSYr7voXjk6EC4kCn90tT\naw3a/DPhI0v7y94upn01VbD/a9ZWCnjpxxcR/UPzUa5pfYIRJYfcaQ5iA7sF\nZV7h0gYlcaSwGUaZ2e5SR6yjTV5APzsMldcef1caeIbug+8BPuhCoAZzfOxb\ntpvKdKT59dZC6cIb+eS6y9DQBP3BIyi9iUTypfN2j/nWNkSBARfHZe8smwop\n1Fs67cX2uCEtrSjeTE3AJzc3S7yhW25LfL0c+yLRitM2R3+s6bM0Nvjsucq+\nKz0DimQxpdOHdIfTK58XI3LfKGbjcFw0MXNmT5v6fnbhHB1eZOmjS1vNVjVX\nTnZ5eKVQ7m5Yyb/OveueN2xE+f93N99kP6RSwi9L+rQ4H8Av74wzL8hiAqb6\n2qHm9Ep9Xza5ofGaFSBwWGQ3LzCMOuhlhFrBxsMgIz1mNqZCq7FzgvGnPmAx\nUHa6pijjEQxtYAyTHCAI1ZL3X/Lk4MiXNqi2tmO+LBNpEFsVievX7OCNLGQV\nMN4wm/m6o/pDM+meUh4l8ctyRuZA3TobwJX8ZjEOPGiHeW8+8QOnhSg6T17T\nOkM8\r\n=J96i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWoMkz3kwRHS3mY29FGl3QsOj0b9CCx7G61lCgTSvWoAiEA6hPEjGZESiLJBKUF4DaoltJitvee6oLjv4dy+NOLElQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.04ccbc88.0_1583886898159_0.17709321634356812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-button","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-icon":"0.14.0-canary.55338c25.0","@material/mwc-ripple":"0.14.0-canary.55338c25.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Ee6wWtJUSS4Km7XOCXdRgQwlT1g0ZgOExVJXIUjPqM53rTvh6ZZpW2QQa4R1QeyFXf6OnTragvRCNVsM/Xwa1Q==","shasum":"7da36711e897900dcd491b2620addcc843dc7c76","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXECRA9TVsSAnZWagAA0I8P+gLmi/wFVifhqwmpD+rR\nP0HnOm9S5beCVBHJ12cpXay/P8MXmWDXipDHxso2UqQlQoDzxpiqDeCMsBE8\nEpkWadB+ij7x84PwJgmUWECWcTo2K1+SHXQD7HT9rlvTU1SWTCN6UZNKMJ16\nOoIrE8HiNHbSQdZXN1UiocOV+muYMRhctAAMwJEuLzImcV3FReAPlRY6kLRX\nS1a+X4xGWlI2C2D2G9dIoQBZT/kVMFagNT+YA2h6GlHPYjjNo1+Lhvy8HhwM\nT3VL8pQGpqIaAXH7ywOSkseA/pvB6UOWOpnYJLgwgkdeBQNVB0/Uxu1GBMRx\n1FwCbUNElY/ETTT7eqb8eAf+NPeJcKAo3kv3wJhToQAoy+MKs8q1ilpHZtuA\npuNj3mvbtkcI5zBpMl3ba6AJC2BT1//UffXDdSykNucci8d3ASeoOV9YCyXe\nyBMVNT0VJKqOYIROlmBpCj8bL4P6KelOTFQra/fdFf3VMEusgolAt4e2Yt52\nckOXxVN/WKpJ+oWreIMKq+qQie22kak9HM0LC8nmXtvLi1FMu3y3kBEcsPL5\nDS8h79kkoIZqWlRuONwHNxtEmrjbI1vQfAeARVAqHAN35cJFjwvsqbk0bY7k\ni5Y0MAeGLUxEn14AroJYzEh2inpuDu7luNZEAuq8Shq+NqShLaG1l48GHSfl\nO3Lg\r\n=FWmc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHFRXVM8n4sKQPVfyZPBQwusKjebsAWnTYvx2TjWHFfrAiEAl8Jnqc20LYM9cPk4oSEE6XBz0HJcd6owW+NMWYzMyTY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.55338c25.0_1583908291744_0.6317263020731352"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-button","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-icon":"0.14.0-canary.b7e388f3.0","@material/mwc-ripple":"0.14.0-canary.b7e388f3.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-K0tJ7DC4ErIXqIvD83aO7pf5JOHOLrf3BHDYO3XR8ish2rnaVyd4rF+5YqvUmAH74yRmlNdi7tnenUZSYJ7DWg==","shasum":"06673bf8c77a79e37218d68693436c033565d2b9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfkCRA9TVsSAnZWagAAqf8P/ioPQAvmo9suXgkpqL9h\nVm3PmUcak5QwiX2G55eqmoo8f5cu8tN0+0Boqbh4Q+jK/kryHkzfL3ukPFLI\n4qOXbAp9cURf4pVxuXGjGmGHVGtOds0qfpwxrQwrlqYN25pDUIreqTwFPnxL\nny3aemh4Dh41p0pxy7vpJBv+dkSLvXzbEswCRZKXOjYe4UlHFwulI1XBCh5H\nFj1TqKaM8jkNutO1er9UeRGiCIoEQow6+uok1DHA1hBvdc2WjHh/NmokpHx4\nToTojqQ38S3J7ruAZk7ru5JGL4KbwCmNDWkftv6xrO0ypteA5iEqhMzXkyp+\nAVi+yK2/7lMdAb1X8Jo1/LY/wDzgISZnu/01EQrHYvVe3qDTVjsRiWMdvgbz\n+ghyU5O3GHDm8Jnq2eFbIVTVIFc1hutsYQkJCwKODMIXTDFWc31jIk6hU0Z3\n1i28KUfS1WST8GuX/Y8W2PcUN21WB5i1PD0SGgeVlTMjQrlu/sa8/vpuoAcc\nFN85JnUOTIeUr8DUqBPXOqYrypRGtCQKev2nznjJA2A1YEI/m3aXD+j99qhF\nXhS10nbYDMMnDhtend6ooQI+c/Gfxr+ma3nXVV7yjm7XZcR1HKZCU1lvdRIO\nrHK7S05Zj2evcG6SPd+p96lix8pV1DBg7LFo/HZVEFpqJy06+XSSomS8ce7b\nc4Xf\r\n=BnCq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsykAcLLEqpk9Z0jKTmFlEncURlA2PwDfFnRHLfFH7+QIgbYz2OTTxitUb3QJfKUR1Rkw1pKsdDnR3srn1pJp0wTQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.b7e388f3.0_1583957988307_0.9498583097828914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-button","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.1ae8130ce.0","@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-icon":"0.14.0-canary.b3211481.0","@material/mwc-ripple":"0.14.0-canary.b3211481.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0iv0MfxmGrwy0+LGYmz/t8no3zvhOVjw0yOCEm8vu0Vy89jZzN0NStt/OVxkvJww2Lkt7eqp+OvURLkrVnBTVQ==","shasum":"047ee32680fa2f133635bc346f7fdaee7586ce59","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjfCRA9TVsSAnZWagAAtNoP/A+Yr/oFStPLd2epK9nN\n6eSS1FnxOKKG3m6pE5OiE1dYjuyoh57zoVTlkZAS/qRoZ81kXZMStCVIekva\nqGhERDeccbgDy4bOg7tHnIfBnArCwbodImUcFtFZOVSJ4PgF/KlC+aZSI5I/\n+MNE1APwvh0Q6mRLMa8Nngdqq0W9sSE/iiEirw/IxIM65EgK1W9GObIvaMZf\npDQroe1Q5UQQYMFIdS7dzdCKNvd/v9fpg3vfNkAkcx0VTap1fBqs2q6H17b8\npFABbrCs3BUWxpDZE4VSkfLGtMIRg6f7pX0H7fhtRcy5dTLnur4uVdYgKb7+\nHLj/uH54bu/86bJnFCPDjpE3cSuRFMegQtDl8+Rm9I4VKYug4RdlQk8Z/NZU\nEPTCHfO6zvrEXxeyE4WtcdaikjiNRG/HqP7Os8B6XUoLP/au22C46dIx4N5r\ndhd+19GpebQ0nHSsJNrrQ+Zl1r15cnB4De96ELxSfLiWYtBYSsgZXTuWUb+U\nDTHlEOSagfOiVrF1wik0KWtC3YEJcCQOnhCdVOCRj3PPdusm4TqXzOsDOriJ\nrKu4+S9J6wjd79cxHjH8i70a7KCJXRFfsIDESI5DL3C5Z+x9Fkz/oNp55La9\n9w0PPEg/o+riw95UbJzJbCW4PYH9CXFTfFutHrmorLJVBkFLivccapl6U7Jr\nFs7Q\r\n=s0b4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcCXTGN3Qg4EDKJ4jS24tiGUjAGT9L8sJ+rLhHirG3/AiEA4yFCKSm/D5tJVGF/fsUx4AP2EJs/wBrE9Hhp/aB5U1M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.b3211481.0_1583958239289_0.1506176614135133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-button","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.d5808057f.0","@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-icon":"0.14.0-canary.0b5c7f23.0","@material/mwc-ripple":"0.14.0-canary.0b5c7f23.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xme946OJYBBgMmaxCZptFIu6/3m9zYtexyTTWj3fbabbLcfrlT9L+TKDyFMkiqxsIkjij0kPYQokhhkSuZO0kg==","shasum":"a8c6f0988cfcfca15b24472bddec36094c3fe5dc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV3yCRA9TVsSAnZWagAAil0QAJZJslvwYvbvQNn2EapK\ns2x5nhF+igQLp4+P11R13ubcFzMOIi+GGaIM9EpPX7/BT782q3cOanSKcvYk\n5TSN8f7eX424xvBNyTtfTDBhA3aXJ7bw8SnojPBZw68ZMoMrxN3XwBOq3ugK\nhLt8Jd6x4FNFzBker6PiBBhdQamjL3crryUlhLVqS2VZZjjatmkVqD7Z2417\nBH9bxVavv+3Cm5jVTLAVNqSUOaD/PCWyGDPkvpw4M2V+YDdNIJBWn7DdqG+v\ndYJzZdgg76Xl5HcmVuGxNvwOfjQXSNbTMS48s1SgLBOXwNTNyEivTA3BP5vE\npG2SvQpp76j57RDOTpHzbGyhcqrD7RUd/2rdZrL8n+NtLYESdagv5sfofUFu\nzy/zEgKiM0J0GTwwzbG4n/35O+ZbQr4zISdKn5iupOFf2OOUXESBUc7SJebO\n/10eyyyFxjAJeh5GUQt0kL/wrjo5HtPnRzRzOfNsaNWt0M7n+ej53WRNlxH8\nvtY4CLYQ8dWJ4QJspoUGfFC2wAeOwV4nm6DVHi0CQMQUGDjL0/g3pLUJevEb\njeUwGf6u/IYOpSM0mmkHuLJTqcHVKjZpCl1uiygV1r5LtV1OFXS6mKEU51t9\njjpLd/74b8oRcu2goDIGOTYnS4AnxfE2Cbd442PmLDQw80KwtJhHM8YNddKn\nJghg\r\n=e6kY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdeIi9KmHxho0iTzibovQhdUItH9z7E+WupDmmDMLTgAiBcLhL3XFnS1YdqxkPOQhOpb+3RDboZID+lgCjGRJ/IAg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.0b5c7f23.0_1583963634326_0.47068587227758907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-button","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-icon":"0.14.0-canary.6c0f0b27.0","@material/mwc-ripple":"0.14.0-canary.6c0f0b27.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-KtbAbssrZCFnsB92EzT0F4UzMizymyXAItuL9l4eqKX/DQmIrU2HBItQ/kq5/FbJ7fJSfUmO3tx7EQ5WkU+9Qw==","shasum":"50b82fb765b55863e000447a4c7be86041d54c24","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbbCRA9TVsSAnZWagAARV4P/Rj/lO3d+smEbASRtOu4\nepiJWhu/VmvDHoDYGrOy7HDjN2VIUcdjylfmeKrHSaPv4OISa9SEKqOkVent\nVFXy6xeI88FSarTwcMjp0X49gua6LexIF8WaT5ePI7o8lBev5EYGQCw2i9bz\nQvLfCNZwOJP8FfLnT4OIV3SGD/rPgrzxi/vvohz8oJ1iyncwUh5k5Qcvz2Nf\n4uXMkjqObqBumV+y3CCGKJzbPPSE2WrbZ0zZPauFX4UnwOX9L+Dd9H+AAqKT\ntgXsDzqO+cltDIo3hFx0FPoglt9Oovc4+oH7DqLE9rDqokZ2g8+lCJ0q3Qe/\n1Q8aofULGL7oNdTKIIGpgMnqnnEyYNgthChKlaGqLKrHc1/vZ85Hb1GDqpXS\n7sc75Y4E4Hdu1j6C/Q7UnQEBUwUiEe5y1XNKABAezuprkGhmpjdFuMLwp9kh\nDSkS9pzJu+Ab1mp/A7tD8to0EKgjXPQBIATzta07yiCRg9lXyZqzm/+oX0OH\nRBDJqTvxp5H0r5oSpbZ/GpC0mQEqV5OCu6QRJdgxLSDvqP/IqgLiJVJtZHNO\nNhycu6UR+PTSwTUGOkqerWXmD3iC3N9YB1Y1dH91BmtZVe6tLhgp0siE3KKi\nxr0DxoayaDdkwMgDeaW1j8BULEZXcibOx0Dg7MvUu+9eVHGZJ7UJ7PZX8WIe\nDlQs\r\n=gomO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7A8v0mqLqldIMpFPMNO8jEZ8pZpcZCPgm27d3gcPcJAiBwiUgU9pr6CGO7WKNae9rY/jgffX8aVky6Tz8GltuMbQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.6c0f0b27.0_1584047835199_0.7739466631955771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-button","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-icon":"0.14.0-canary.b6c53425.0","@material/mwc-ripple":"0.14.0-canary.b6c53425.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-n5rJK9tvsdfn0hWTvCTU8Usnv6YWY8IxF8q8U0z3HwnslQzR8bqSHp+/5v6voatKuh3cUIZd3hQfGNbWHUG2jA==","shasum":"5100747deabf5ede0022e92498c52f4d0d13f02f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7r7CRA9TVsSAnZWagAAI48P/RxZ4FRkbP1gCTAC8mBl\nDheaVLdjjH9PyNVXai7nkuctyxHL8quYAWvxQsp4C43nz3EatEn89JxwStNL\njTTXyqnRrz6DHxtTeYR00Wagt1/YO8+J9tM2vn2i8VNC3Am9kUaPVIlR6dDr\nGVhKIP0+1uqlMpzkw7rKpnJh2qmwOFlyf1ofag+fYc8mgAjjfCRXLA0ZCwux\nO7DHOOCkCT7DZhNUAlZYwUJLgMn/YqV9mcw2w4Smg82pR2IJYPzKmw234rxh\n5QgUarj1jEUAgMp6dAP7RodZKiZe4lSxfOPwnAOfSTg9l+w0PSWmgwRJJUjD\nGNFKAf+IXXRK3hl7sV8Xt/skAz5wJYEgFzLLjYKBkud2xsLp4ay1Qu0zr4ci\noWcYA1jusPTMYcztZUS24/3v3HoPYWN/VAheLkupiU8LLsBF2hlfHuWKTHoe\nciSix2LsH3bIlAzx+Ldb6vorByGHg/75Qinj+/N5MrwJABn2IWQ3m2FpgS9e\nwD7ycoerfaqzKVPKdsEvYEMoYmHU3G8uD8laa4i4LkPCqtra8RFb+ZvOMIFE\na+K95scSdhKP7uWMiQ7O+K6S8yk9qoOXtauG27CPA8/Z6m2ejupxypqrmfiB\nzGczXHyBi8NnEY6JvNBXT/03ckHEZxGrEoqbPvmjwcFkguOZqLS7qCClv00u\nEUPr\r\n=+ZX/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVcR7eRJdSYfK0WM28k+rTX4fIB59uwa1q60KapsvGtQIhAO82YuVgsshEPb9/lJY/BJZMkay3mlaGJQusIsPQGCMU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.b6c53425.0_1584118523344_0.28110299904217384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-button","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.bec065920.0","@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-icon":"0.14.0-canary.306cabed.0","@material/mwc-ripple":"0.14.0-canary.306cabed.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Lt7a5RGfZ6KlWtSZBDENSRRH+LfmPuemeLJzKO8Lf/AG2hhevA6hH7aPy6aLXhjEhVukJgo0HCRjdqIKH7SuBQ==","shasum":"ce93a47e28541ca01d1c78cd60c99b5d6dc2fcd2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT56CRA9TVsSAnZWagAAoo8P/0lHEdp1qB0sGWRJVICv\nRU4sqoqxgmUFkdhiFfS1kws/+lLG8oP9VfN6Q68czYw0u7H9yHwmAZyTAsoX\nEQYF32ZVWGVksPY2f0CgOwlzvxZNcDqMmK55P2EgX4sbt5E/lfw8LromIZjh\nTTNknOWQxeRgAUju0qShxNNhroL3+VWUav6V5iblBqGvHYk9nlfetKsP2+P4\nV7O5dp/u30s00WfQDOfEV4rLUHeD+EkMfhbC1o8U/qaWoo27dCno/9aG8F0y\n3X6IUT62AeJb8fn+sbzwifVEayW3lamOO+x5FwxF8vRT0LsOTEwbGMxooN7D\nIYzwVeaLmH7sFyWAhjEK81qkPNVrWqygtLefinjRGALsV7fDuUgC0LbRmqTk\nq/Hmi5SRWo31BqwEJKDOZ/gNs5Z70su02tpUhpTWl8uXgPYDuDlXjSpF2Ole\npYxy83pBmbHb0fYGa3gOJYrc0eoj5MOBI0wGIHGprmhZsIo376SC5jiuYCG+\n5U9koEWlHjU9ER/16DdAaAacJ5YH38NiFsNGcaCdf97Oy5bAFSH8vKN3CEaD\nJpfBelmrxUMX/feWL/l/KmgVcIryQxt4facoJoSScTmuXkBWdtugeFKeeY3g\nBkZ4YSobgphWZJXVF9KX/zsjNSfiRLJUHSu+JrPYU+N+hGsTo+2MFsg7+Kz4\n7qdK\r\n=P0+8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3/WmrYSxX6Pg2KawWWf5XhV9eBRo8xQvGqgHmceF4MQIgT4Agig9rxi6D4RjFnzrn9fxaOoS4SNCGHuwpJMnRj9Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.306cabed.0_1584479866449_0.8054277590726329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-button","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.776291ef0.0","@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-icon":"0.14.0-canary.4e250cbc.0","@material/mwc-ripple":"0.14.0-canary.4e250cbc.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-AU+KeK1kJAwJR1nM2grd8TktoYAEcOArAZNHsyZfim18OdOMYMk/63ANVHu29D8TMerwJ3J87GBT0n9JLfGLKQ==","shasum":"e1a7c8774682590b5ba586d98bc76b452858f5f0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/pCRA9TVsSAnZWagAA8HYQAIhnvgBiGrCU0ZXA7iCb\naazWlj4jok3h7/X8Ihrq+W8z0iRxhwgkulOLotLXnfzHBpxE84fDRejx8ZB3\nUaCxoQj6ITzHAQrW4kMZGyQ3EAcM3vRu0GNEyxQK+aseZd5qN95Fyob7Vkej\nXh6wqmKhCzN3ClWcmpVVRi68lHCGTPBOCIqkxCqla1THxhbzjl95P6lOvajH\n1vIciflZR4MwwareGTup1wB9FF0XjBwwWQb2ueFlsxe5sVVroL+flesJ9rkr\n0G77am8JM0QuLAW1YYzJ2299Xra+BfagdAOADgdJcyImTg/Wa91Iezlp0EOY\nRWMCECx3a6pb6fyt0d7U7FjduPMg++p+ZAm7f+ewjmL0Yu02RwTbWz2HQuMi\nViXVShBNgngRBJ27U+6/1YLspOQd72u/ZB7JuWtbvOutq575q08F6U4dIy9v\nRmiOZT7eB9IMPzfWUXtF/ydP0alFzxnr1LoYdiEeB0RfuTAsP5W2OjWospAq\nVjk4ycQpBC2bjMvGAsCIKWXbtdNuVlPhQ6VN5Jky6elvJwUzmEdKdw+dKQwN\ntQIyFYJzCdi12Q3cZJyPfAx2ppLGQLW/zNnTzYOs0QNIBNcdHaZ3KRocO2Oa\n4gTEoz21M3Uaf7WPivIJ2AbmRph+iIZpSo+B3VAD0ylDBCw+GxYCsrOrcDvS\npIEe\r\n=uQkN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEsOqBeYP4vfT1oktJ0PwwoH6BIFAV8Jb70JGLusiW8gIgbesDIpz3Y7C3kVX97JabpTqHD21C7cuYK8/aeK8JgGo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.4e250cbc.0_1584480233154_0.9383178522448992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-button","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-icon":"0.14.0-canary.ff82d9ec.0","@material/mwc-ripple":"0.14.0-canary.ff82d9ec.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LBjuXSgLU3zRRTMVT74N+xi4KaqzzhFD6QF1ZVZCwbhAcpgcGpAB8U3zDdtOLE1lljM64Lu3OCgY/QucA8DXYQ==","shasum":"ea62576b43959dc0260fc4c727d76ce8c3a68557","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmY+CRA9TVsSAnZWagAAeXgP/RGIyVrSN1nLy+cm60ty\n5HNt8NH2lJuowb/Wx9gKEvev0yY6G8B6iXn4nRxrcy+fyiQHf4bhLPaFfI1U\nUdQFjYkFsbSz7fswCJz1W31c07Tfho3zaHHHXsLj5WJK0w+XQni/oZ+Dre48\nB14/YXrFhdQyaFSHqnvBcUs9lLNtT12Y2s7D9bpd/JlBleLljaf+Szql3aNM\nMLBJeAMV1HATlzTt+AxobKM02ega+mhE+2xLiDwddzeju3X4DOHZZ+AUZ0T0\nIrC7NDAIyvJCIBIV6bmtfBwu1766L0EDrCGUkgvxt8mMKwmb6ZY1zpE4+M6V\nDuqhotHQ9GszTYJlaBJc9ra/0HeV9fcnkw9VH4O0eZRLJPoziUIAJmGzt1Zb\ndX27YstAz4/Jg2yLSTnGlqQKvfzFFuagrY3omzIi5cNUzHiT3HvnjcfZ58AT\nQtwDiREuXro9z5SoUYWbb3EzgarGEnzmqsvIiurkGpe79ORtBscBb5XEjpuJ\nFzGp58KZC3hk2F0yqXPcSloceEFL/CxaCwZXrCkmiR/Q4agW6272r7Alenre\nNdciq0E+9dkphFzdPmrI1Yib25oegez6KsklUsEP6A9WnFt9VZFItUB0a0NO\nCRkG8Xny0JdrnX/17FhgoJ4waDjLYt7ri/ESrhuvIeE/d2NMxy/fLQNbelL3\nBG3/\r\n=b9lF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjGenNZpuefFaMwAb8frxYl3pL4pzbjNfp0uU0l4OiEwIgLj1BeUCpFSCJrO1UfBa3iiluDLpRH0YNXhoYUu3FA84="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.ff82d9ec.0_1584555582444_0.04470655055683892"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-button","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6b48781bf.0","@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-icon":"0.14.0-canary.f50f48ef.0","@material/mwc-ripple":"0.14.0-canary.f50f48ef.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-83/TtuHZXhGGJZnn3F3wdgoYc1CHLqIe5ndIgAQi5O9XeehTUxV7+BYVxw36ncQ82CU3KQ5HlYWZgo2A7Rakfg==","shasum":"964db9eb73978270f4c1332fd15646c65b788437","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AcCRA9TVsSAnZWagAA6ooP/13LgFnwy7SSkOuWKlvv\nYnFLT25uF+9BmkFwnW0ktozkPbCxd43GfAEnrC1v+CcH9GXXKzWWVqZUQzRC\nKwEnhTh0PHcKW1KEAiE8g78Be5XJox027Zh73tnlz5jtqJAf7+OTekCYwyX3\nmBNnJ2yQY7h4dAde4a/+Q6v1EFtU0+e/JpEoJfcypmOdRKhvHMKdcuIH/E4A\nCkFqKvB0tKq7g18iI0xXJyQx+K1jS7L4zFDNTIWLDKLJJcvcEYjMxF7sdfHp\nUeK8cj9lgAKXsHRWec11mIpbiudpJpxfn2BOfuloqxGr8hEvtf1oghIUeEib\n1HBVn0Ah1PSJMl3eNX2bSLFZrIHCSOwH3Fo+DQ+BFrPaR6S2Glma9BuGvtTC\nTOAmzhpKYa9Hr7Ly8hkOIYyft2w4jJ7rEXrPqPsqLStmMpY5PR6cBT2FSxee\n4WEEmdoK1lNAgENC9XI8KA8HzTYACU138/9GQzEuKCpWcwSfbV987S8Uotyt\n7uch0ZICciPjl45usIAXaZB9aIn9BUeERelaeGE2YTjirH/zf6ly4kSEEwG+\netM5/Ibm3+jUQ45u37Ktw/WV8vTiiZh7qJqpvFh5WRh33OPvZYl23qBPb2IT\nLmh4iEJ7dp/mBcY+iTE/EWS+GI8hkcXNN65zYetonApflYp/7uwh36aDN48B\nnbrt\r\n=PhjF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNxhe+RGcJeVxvP4GU1NqsTaGLvPR+aS43MTiM99h7SAIhAO84XEWK2IwkseFVFuqYd/SWsxzHr9SVt8s8so6LNfeR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.f50f48ef.0_1584644124258_0.5662068885751927"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-button","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-icon":"0.14.0-canary.134cf877.0","@material/mwc-ripple":"0.14.0-canary.134cf877.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8HIbLOaEkon6PTqDd7nrSwnpAVz2yaN8OeJxz1zSRbejx/5g3O5kmLJ6Ia/DAoug0zzq/x85CJMpR/ffjxnQ4Q==","shasum":"b2373714a7bce1bad887d517bbf76b86b4312934","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9h1CRA9TVsSAnZWagAA/GsP/13yONWjdtYjU6t5oumy\nQ9L/49km/khSXpaELnVKaIPBFDsrz+KxbfLYZT6NBfzPqsp9+pMdodaSyj73\n/SVbEQnKuPpvcjf7WFhh/aqCcWoj/F0fAnBw5gTcAgN9eWXMfs9wqJKx0NoJ\nF3zFyt5cJncdMqBdi8H+NnuQXceAav6RueGfAsRnYVaSHjH321GgL7eyATJg\nykG747y8JnIjSQqQZqYdnnQ/lfYtmOreH4ra6sTQDZOG1f3ed4ltoR+12qUz\n8qW8zw9utgiQbr4iuwOS4UO3ZOP9diHcvZAOjYM5Sjnb+fjHNVjqA6jDg1ip\nEtzCIwrSbOsgw2DMZNVIDSWt443rMmdUmvek46s5WVWxXWKz3FtHcMAaA1Zm\ntlJ2ruCr9NNs3PV7RjvRHe0Qm74y43WcaApAvAMhsJj1zUWHO97WA+JelWKx\ndtMV3LiiIycC2HqMJrPSsaDFII6hw2Q9C65H+SHuQVfe9VEc8krl88dylWhe\nvGvamTX71KqMLv1dHC/CnLXb4OI3n2pdHBM84/pqn+hJRFVDYYBGISP+K4rt\nn4JjC34h7hB6gcAkNUnqd2V3TDXr41LHdS65WB+4cdloGtw2+99krFPgCOG1\nERyn6eERNpia1UrW2tfuUHLFbTUyMWflzrQyXcBNEajn/tTGZnIUau0J9L8m\nKZI8\r\n=WWIK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjhdTxKyxs/4JW6gGbg1pMe9YDEGdsbu2jg7a9VSDeeAIgdbNKp54A1tCFMcJ9DUCO1mybqJh4Fk7+lsu/fxQzx/E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0-canary.134cf877.0_1584650357476_0.08643548794932165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-button","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"^0.14.0","@material/mwc-icon":"^0.14.0","@material/mwc-ripple":"^0.14.0","lit-element":"^2.2.1","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-Lj2Y64PgzRooYICKXJvi4PUm9K3lL7HDj/sVJ2J5X67Gx0WpwrwbZAtc4Aaw6e7hXtsKOy4bJUvw1avNkDZMAg==","shasum":"f19209b5a47f6b254392db923331c25c7a05c071","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.0.tgz","fileCount":16,"unpackedSize":83088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QFCRA9TVsSAnZWagAAqaMP/3Y/j1i7UyfU8fxBRQjc\nJSzaq8ys/7kbYj7BODk6W5oiy23scMVXSJ9tRrNTQkG87BpE7u9F0RLumzz4\nha71gKEq+B78U8TLZoFeKoP1+D+f2FSMxpsu67uaIpi97UzUTNR8680T9So3\nkxufBDaXwJn7ajw2LBgCdjG5DIkzcu86Qaz2VlQt4/C502DcpA/u3yAMZDml\nYMuzg/oo8PY6ORMSaE1WCcScr2txXc6l6bSwnNsUdKCbEQ5jVuWkjVZG+xYh\nSgQbM8cvT6i6CvVG0vfUAkqOuDbPB3VPWlOB9IeMv6xIHYY0uaWrVJxHNyTI\nc8YXZ9JADxo2ODVyJK66oG+uNkJBmouQiKoNlhbF68BtWUme1OnIlRt//1/2\nxQFZUTBS22KUXWkGEd4m+iIr2jmvZI+YZPpAzGAyOWHE+lPm/5J1isHbc9Cx\nZ3V4yTWexgaAP6Ejh/DMHDzbUNVrqY9NlQCPqFQpdV+X5XvIK89ZzHM9foBR\ntOYlIM/CoTuUULpSc1/2X0rMO5O13QRYeyawQbEr47KsAS2cmSVs2e0Ds+K0\nNHBeW37bhzqeeqDqCdI206gVsdOSV3dkFkHz73qoCVI0afZ1SOr4pxHtm0t8\nU5PorfoVPL5sDtLYHJsMPx9SCrnGvQqmsX0whQ/S77TafFAItx8F2vKdQKg0\n0Ijf\r\n=fTne\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEXS9skSL16jCiMp+4Kgsf2ar4LRx8jj4CJSNNcYBWW2AiA9BdQewH2cs0phtS30Aug+Rw7GlJAGFJCX52hBotf1Xw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"azakus","email":"dfreedm2@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.0_1584653317446_0.9651682458883448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-button","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.a88c8e4dc.0","@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-icon":"0.15.0-canary.2c1a4913.0","@material/mwc-ripple":"0.15.0-canary.2c1a4913.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EuvqfwOzibNlic++G3vfjK3NTNIC57UuOipFSKlqW8jFZVlaQAOZ4Q+rJ2fdaaB5VcgwjP8QCgTjRpMm8qCGUw==","shasum":"fb8bfebfb02bbe31d536d0fb7f946bdeb75e2681","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/moCRA9TVsSAnZWagAAbzcP/0+nGj18uNXavpuceQrd\nc8VFqiXdOHqmY9tF4VlfhBdJm/HtLRwA8v+fNoMTiTlY5T5rZIY9avQXLRBk\nm7yWdhlWcSNaEqkKmI9F+nyF7Tu/Ar6+ErB1FYikdq07Zqm955WxKbm+3wHK\n4QphDp1KkVRjjFTBeBgWc8FFEvwcISa++SoQogGXO+/bAG31q1Fr2wSRg1cF\nbFKa1TBvrliqMp6mLv6Gy7F2TaGXmk+23glT94WxhqSdT7rZvtTMo5njPFNW\nIwi/pa90ytqOabOPEcGXFXoLxjnXtxw/Bdj8bRjf5ziJZZD5l1bhSIgDir7g\nYdN2kB29DH7jCCtZ0kqMJnp0h+0FgvjFtd2rEfwdpoikYRm3Uu3CTIymXFe0\ny7lZCTWxA3NoPHRHEd0JK0aGgvel44p1FVx0WXWbtvwZ3uX0mICtWPnppJCr\nJwuVxTnLzNUom4nyNsyZM+HZBQh5R8k5cfFJ3tCiFEGADYNRdXdUfOrAhR2h\nx5jJhP+PQc+FzP+3+Vhq8uKCpz0h0VCPMJS6ohB/tw4sMB9yIgVyXP1LHlGL\nP2NRNa+2ShVUuEwzB6n8aBJtqqiXsJ+6fm6LcDVD6XEkXubkndFtca/IbTUJ\ngaDW5I8F9VEE5WhAx3RKZcQXqjf/S9DIxv9b7lag4rRtOfB0Y18pMW9MXr5G\nTUwd\r\n=/5cx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFN3g+qKsi0ngoJCbhfjRymQ1YNy8SJg/6d33CQlZP/yAiEA1Q6FRXJ320zyAuDuRIH4EePE62NiUs8AIkFmnnNlse8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.2c1a4913.0_1584658856141_0.292280737054297"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-button","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.cafe18860.0","@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-icon":"0.15.0-canary.3a6e481a.0","@material/mwc-ripple":"0.15.0-canary.3a6e481a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TNDNuhegQzHjKGw2+jAFUxRxPntxgr33y6YGWnZwQEtT2KiFCnTx9WaxR3WB3PD24ACZto3oU3fcKPVs9SQqAQ==","shasum":"aa7f5c4c6b799a115885aab52303266bdc3ba729","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQe3CRA9TVsSAnZWagAAlggP/jiZb76hQj2xuhFfjCQC\nXpwKMnwvpMLXc6jPJWZH0rWG31E5GmiPU+4xJRuqJjhe4yzl0jgRjnkcjKyz\nEI00RaM9cLhETyIpCigUnxy69suvOWwkOomhofm1y0yST63+DUERaT1bkADB\nONrYq1UCNJ4gZHtNXZrT92kwucw6JB5Xy0CWp/dSWNvYMqBMSahNCx5pJ+k+\n9jgDCTw3jLgVZvU+S2lfcGhKnsdzyXsr3aHp+lQo+zy+Bw0qvuMzIyiZw6FM\neNoZJMPY3sqVZjrIoQLNzRvfqRP9eH4Al1yMBub152ALHhCmGmZuRK7geZCS\nQySjwJPW6O7I4ComS7IBi33TU2iexFTUXVJcWrJBDi5Z1Vb0MjofNLs1mATR\nWCBHy/cddUkpoJMzWXWzqp8W7O58X97SdYkgFc1VMxIl5rHyl4pHXVMsWTnh\n+yAWWrIRDzj59N8jk2ocnSZkt9KHlF1ECk9Cos2oM3M1ns//E23VGLv5mjSC\nsZQBDu8MVWkkuzM4R/Cx+AoWZRdLWGH9dKodwt/uxLtXhu/mqhUn2fvERlXb\n2PfRC/XpwnIG0CbG0qU3935KYB+AnaulA5gHkxC61j4DSGhxx3rIEyjFQLsw\nk9cTVYm1kPMpl7wnKTy7uElZPFGw8CEsGDLORZEPnWQVuv8SmFA3SPuwX2gb\nMa3s\r\n=xNeV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7DXruoUmfzZwCe6I54+o++5na/8rVMsGpS2quxMuVYAiEA7FmYbo0BuA3OWxVnjIvtWGZWBCvQVM9WM6d6Fe8lyEc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.3a6e481a.0_1584727991000_0.7414117916567087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-button","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-icon":"0.15.0-canary.603d6eb3.0","@material/mwc-ripple":"0.15.0-canary.603d6eb3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Mh3oDWUoaSlTJkPx9/XguXG3retgISvw4+5LYm4OsremmQDxp6T95nu9Xa4jA0MtLxhUyKfwaDxzFbPvgTjPqw==","shasum":"c59b44ded9ad3898ffd367156e505b4396725856","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTc4CRA9TVsSAnZWagAA18IP/3Sr+QzziQW5OA7Mk10m\nzeJ7LrcFACUdLbRqOWKmQ8q6VmFbTZ7aSxmrduCCW4q1ia+vpy1q3AwXuksN\nz3pwpsfR3mvKBdh5d37yv7G0OKYJwIbfqpA1c4/dPIAdaSHZUjUjW2mSQS5j\nmHxy+ZD42OAa/uVjMfwtVQVArDlmxMzKPuQlfjLmuWbkw2iUgrdpRV7AI6Hh\nFEmpaKtXTysG2bEmSFxTZGxvPBFXfV72oGAMGBdH+C0s2LfbNgmmgCMAq+TS\nYH8QCrvk8KSKn7rDvj2ruJvSeUCz2yQMiwx9cNoCsXeBvXCqMi8vjXcV8auq\nInr8aLTO6rS/bBEUg1mubsurLEBaul3oCWKrMfnxn83GEVHV8q/wnFG6a1rx\n6/YGmWx/hJm5Sd/X4CsvUkkNUybg3E8sze4WpcBn9QNaFPnMRSKv6Dcbl2IL\nENN+nm68AMTpsRVSIGFQagLPZj3kTZPLT7T1w6TiK2ML4osCngT6bIRote56\nYFp/ytiIikdLclNeoj8WoZczXeCuqOkvGTyBPIS9VgSXMlZU0o7g3CHlxJNG\nCxSlcJrEWB20zK/PxfxbJAGN/KYPZpX1ayrs9WLQd7XIO0APlOPWlCcYcdzQ\njApRUs+R3FhdZHRiyQPzaElcaWt+gB3zq2irPP1zuvvWnRI4lOm8oRem5wZ4\n4Jrc\r\n=EvQD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDMuewaCirKqoOd4EjZWDrBED3mW+oEMSftUVA8NGYQhAiEAs3PtNhYbOym8ysgwOzgroM6LANzPDdYZ7Ya6tjblBoo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.603d6eb3.0_1584740152434_0.5383478153238834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-button","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-icon":"0.15.0-canary.05c6a93c.0","@material/mwc-ripple":"0.15.0-canary.05c6a93c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NhuqYX5Wd8PPNQYrol0VRXvJ4uOPacU1qxzVR278v44tYlUHxxJ+CTVt+DwznsvHkQhzsDD9/prp+lscfoqiNQ==","shasum":"aa92ea23febec2704a6dcd6400fc85e3897de783","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWOCRA9TVsSAnZWagAA7JMQAILFCulGWJktbZPiWLKr\nNzkg+Txv1FgqzkIh5qY9cPwEdNiaeUpFEWuPJNuUgD6w8W9/eBgWkR/S1/v8\n+s104mG+U8hs3WjS1JIbLT4/7VI03uJssYYjpMt212d/nkcPHL3C7fUTVQWF\nCniodjryMPfa/WCqxUYWxyz/amIOMnVv8rBQAUxfM+7pB0ntXO6qmIQ3F4Km\nLhhWj0qLAULxu+vJdsb92/D8vu7YvYmUoxxQPfehY1DwEjjsA0wvFIylLrQc\nzxYrKVXoqa+4coN0VGuSHLU7jdXZCm+3ZBD7lBkmlLYD7zmzrnh5qhzbO2Cf\n311kg6iNPNAI8peVGbskSxRnpxhmZs7Bz1aNOQziPH+iMZfG2I9zbWTX99cD\ngt+1M+f1OHq0hKnzV4rdGhfLveA34ZOhiivMQssQuUngXHaHxSaD2xJC8gV2\nZcMrENQSm4YbiuCDcxT8jxLYVRHxYt4fqydF+AsSV+HdALONxwQpBgeZutQJ\n0lOP7aWTdR1n/27/SgKXD25srJhXremYObb1ZNAi8Rz3EsXGEhVA/4FQDalw\nllbtvG+Pepx40eB92Ro9qoKFKa2O2I1o/Ff4AWBWlDV0ipTht1k3zNmC4JJU\nHayECL1Hpj1+1t7y8kzRcGQCIqCPbowFfIAaWFwCEKHsFx+WqHgC2DHXavV4\nhSBf\r\n=HhL0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYanUdkc0eJmsDyKuEYMDarbudXCbddoDK3rGP2fUS0AIgLPNEKOUV3ELsEtJJVIPozASXwAPiSAO+Nfi+TzklBeM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.05c6a93c.0_1584981390439_0.6684009188633278"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-button","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"^0.14.1","@material/mwc-icon":"^0.14.1","@material/mwc-ripple":"^0.14.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-yXJDWsg1fdVp0afbLvtf7VbeWNhePlzK5oYZIaFzP7dmCWW8GvLK+04h/7mYMMSZeRTCcNJuRlM3Yi0S8P2YEQ==","shasum":"9823c874f4a10fbe551bf148ea0270f443a6385c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.14.1.tgz","fileCount":16,"unpackedSize":83088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiNCRA9TVsSAnZWagAAe1oQAKBVA3mcMuL+n9Nt1C2i\nLFBasQXaAB1eBHCNyy6cYN8pjdSUWBYMaAOG5Lgag1v94cnpqXq63J+4xXo9\nom0SYtk0JF//qQTae306M7DWo5paSvqNsMjXiqijjQlkx7eqSJf0Foalg4Ej\n5VhzynZNI8onHQjdZ/xXgHOb2HNsmql6M40clsMtFqalLwqd7KsxdF04cA66\nHtUb3FtHSt8Kcpil0EtZCUPiPKX2o0M6bTbaPrMWCrEvewYW43q2YkeipNhp\nFjj25LKKVOHmq+ALlxzzlUV/kCT/wjy9K9yr/i0eltwbrZcnNqQmsZgIK19E\nrurN8t2YEcrg+dwRPcd0a4DxKuuR3Jq9p8feH/tQYLoI/8Qfu0suqPJv5Fc7\nF7126LPbu+0onny+neu04Q5XYz7z2rqjw2STts6oXUgKG1tTPS6mnoHQzNeB\nUg4IMWf/2Yrst67QT4RNUPKwoN3rukeS4Hi/E1VqGQk2ybhI4h1weNAfX3dj\naMiXk58pJk0VKwT05FxUkQDyjf4GsBqqr7Hkgx9Nm2YS8FDS1XthjZLiVC7e\nhv1XrjVvA5p4TTK8v2WK03WATrr62RWyGxHXnv7ayc/C9dExshxq/P26AysJ\n4Yyg8IDA8EUs1JNAQZjtkT2wLNJ+6MsBLofeN7sL+TjT7sUC3oDaOJZXaczD\nrm9J\r\n=qvFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHboEO38TQpFITHzg9lGcImg7UbiBqrNkBmpKeweSW9ZAiEAtl7RsgjPWKieoKT+Pwe47Z0TRFKzWur4GT6Dacwi/lc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.14.1_1584986253030_0.9204133986549183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-button","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.35a32aaea.0","@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-icon":"0.15.0-canary.4e6be3f4.0","@material/mwc-ripple":"0.15.0-canary.4e6be3f4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rGORdmEFYgrcafvAqnv5XkSrd5760tzB5KVNBXjOnp6a09wUKyqBVQp2CHlLzHDRZ9S3guFiF+62Nm+m5tdqaw==","shasum":"44489d8f4b4503be54a74308c0aec7626a1f031b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSLCRA9TVsSAnZWagAAy34P/i/435P0dA+lgdWUd7R4\nby2CDEkXy/Ftpf/sV0xmJHvOXbaSKfKHpvIfJB1rmya9S6YTulvQh0Yg+op+\nFEgNsMQ1/hQIJGqqY7aN9L74KdqKDWMKEtfjvq5AWOoN9xGSAQpHkl693Roz\nGRScpoTbB24CeEO6owa8F/pApmTniFOpFdsR2gtXKgLY5Ecad9owo6rc0dK3\neYPVQr9mCvcUOGdVB96Ixdu3EOiN2KBIyeOyS5XcswbYvWAxYr15nxz18G4u\nXxZ1s8h6Xh0Xfdj0Cn2B9f69HJE+QAIE1rvXOJCo6goIKDM3B179I8bquFWd\nLJ9ZIFfToaX4C2lEhzp5ZJ46Jyw2kOxKiAH5TMAcwY/VT3Lza3sva/u6YuTk\nL5MPZCppnAdvuA0SU85AejQDyOZIddK13ZjXt3SCm4P795sBPxlLdwiudC/D\nrqRPQ1Hi2wQh67JZaPxxHcyPcatT0kh0bYILxKMWnJbij7acDMx+Sy2di27e\nZgK1bmmDIbm2BqqAi5+SvtWPPcEUNR+PEvc47d13Rict6L6hH+m4pEG5oFG8\nTph6J09Y8b9tWLj/uaEE9vtktOxGxGNduFmx4PksNm7g2zYBaJxb5VO7zIF2\n1g8soLPsRSHGxEHj8bqs4g4TvX77ECE6XLFP5k7cKyh65bBbOrbBmg6Pg0bR\nHUT3\r\n=yhE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+57zoY1RKgX/k89Y7o7ERgCLOswUPSH0VkZmMVVd+jAiEAwil+/hA03R9FKZQV2ombMNPNw8jFADT8vXoVTv+ZaOs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.4e6be3f4.0_1585083530766_0.5241536710887786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-button","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-icon":"0.15.0-canary.c29a683d.0","@material/mwc-ripple":"0.15.0-canary.c29a683d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dgD9YOI1neNiPr2Ee7p8SdndGjGzzWYIlmfbbISiQ4uAT1LCyCbB+oEpmTxmEZ29HcLNVq4y3UFD4vIZzWg/fA==","shasum":"2379d9cdaf03324139a388c0c225e49c1aa7a801","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeni2CRA9TVsSAnZWagAA784QAJTmRt5Ue6shUPqQCfpB\nYqolHqfOJBBZzYVvgbIJpdCPuk+MnhLjXAQesqt6VxvkARVkyszt98QADPQm\n1W3ejmVZC4BtCVtY2g0rwiZSp6TxAh6xkTg/C4PhBoDMgcebvdi9IAWPX3vw\nFiYcV0k0d6VEVf+HuaQdhqxdw2Hh9mdnySXuqPsNnwrnPVC/tvzjisiysRtF\nONOMX2blCoKPsfelzN4k18JuTQJwWaDTGgkfUNhEZZOCMy9228K4vPP5WfDb\n0ApV0Xzb+bYJSopCMVX5PgAYgbn310czj2pKa1DUs+pGza3CED7z1IeGnaTU\nsjy6P2TXrzK21gIIwiI+8DL837bE/1FYKIu+0nELF+aIMYh3v7ZLsl3V44EA\nVVI+sPcWCk8lDR1SpFxLYaJEr1gn2Kus+pcTqbswZa1EwF5ZGOa7GEEjk5Ro\nto6VnGaLL4DmR7yRo45YS+3XRohP7RKff5KF/LD7DGlU8zYrCmQ/9ZNd+JBn\ndro+QrgoKZGAwwR4IRfwl7m4kgiyKmgLF2dDKqdJDHBjAN54mF6t75l6gDcy\nkq1BZ7F4VJHuWqvEq5xi+xBFl0zFOq+jzbEJuONZz5TD6YD+ftKRnAoYdhkX\nx178wsKpVTN/1aKEiNdwEIwFiNRwhtzDFnLdCG4zH62Wra5w2wwE99V6tGLc\naLbh\r\n=eKsV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPxmeZLhoYIoScTsamjDJHHJnK0BhCWx22WOPQODdbJAIgbEnp1UsI5uJ6aPbXcaye4qI9cKZwUAv2uagr1OjEX6U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.c29a683d.0_1585084597702_0.5879673811915758"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-button","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.8707953b6.0","@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-icon":"0.15.0-canary.fca3dd9d.0","@material/mwc-ripple":"0.15.0-canary.fca3dd9d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gDk8v9htl9gIOEJ8LBKn+njLqIvCdVn8owCoIvG0siF0+9SBQJnQxzhQ45R6EbUTzLlcgJKG2EygmLRWB6W6QA==","shasum":"29bf9145fb8d8a0dbd069d9feaf50a44cdd6a009","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsNCRA9TVsSAnZWagAAfzEP/3QVzdwpTyuh7cdO1QrS\nBz6L9uOKyXMPMrXmA5KaTy0sCrWYFBJwiFwKDG/JZ+lOtPT35CbhXX9Hm6vs\n7Umw0czC+lE8sPXxUkja8wZ+YNv4c1WSQcnb0knuFYFe0REZMCUQepN4j3Kj\nVoSELb+27Qxfarb2KwMrNymbtz7u+NGJnD3EMRdarWZAW6NUVXkhK215fFF6\nRK6UG4uoWaxdzo/Oziy6AB04RmLj+PaScBP2ocrINlQH7pvC+o7Vq5IUYgmK\ngQE22NC8+tWgUb+m6TN4vJ/o0mXrjQAXofkNQHr96VWCSGJJJUzPZ2Alo0Gp\nJw0WVKsSjniN/1a35Icz5PeJtlmn6zvU4RkE7KOj/gWGF8dO0EpsJPZ128pf\n69Hcryvy2tRAL2xyIpI4aYnFmSLDHDQPVtV6buKCU1zvDfBqSnaIKt+L2eVD\nzKgcma+PqjSNvyuoJfDF1C0Je2k18vRAX3X85yoH2xCf6uX60zg6F6j/9qRM\nop4joezo3c2ClLm9h8CiapVpNdOYLcQeBNbzw4HRMVGjoyXhSuCASFWUY9yQ\ndl0A6UcsTX0shn+H6ur4apU+MRDJ5+HZVEPAArEEgOR0dEinY1+SuUHUKiF4\nmqCLHPsEyRFrAqGgYnacX5rd4E+d+mSp61qfp8szXN+NdNeHqRCIcL6XkAfN\nlL3I\r\n=9HBn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsaQPLsgj4LhT+0QQi7raafutj2DiGOlLSm2YytIVoqQIhAOmnxRkZu7T5IJ58Fj4b8dOKZxS/nw0SQvz9TWPQTz04"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.fca3dd9d.0_1585093389177_0.10283459733128275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-button","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-icon":"0.15.0-canary.1e73da49.0","@material/mwc-ripple":"0.15.0-canary.1e73da49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-gZvzaAUiXS+Ti+UQLUDBMQVIOILxj48azGvz+qIUQaCqzXXOzwoxBLFfg0tcYMpFQ67LUd1upvx5cSCH2u3arw==","shasum":"874ef96e34435f5d65aa2af45608ac579fa2b9ed","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81WCRA9TVsSAnZWagAAEfsP/ipG7y6qSPPk5Dptmuvr\n8cg1aMlh2zB8hdaTc1YK865puzUxrarKQ1LjuSPBEc0Zc2usIun4L16uR9WX\n6u4641P+9+6/Pm05b6cdUc3WLx9gJ9+1xiNhooyvQi6ygYC9cmoRV45BM0XM\nTwb8vRk0izhzvtoOCoOs7AQ6aRa9s2QO7LDxqU7qc7ZRF+cHsnBc0JxOi5MJ\nHYQ8KpiC+J1OXco11e0QFXPcP/CXLibf4y8JMy1vtk345owM40rj5czEvExY\nUP2ib+WfvHUwZgZlL9+nFnlBQh5a1nltI1EZR6v2BTGpCAVynqxcQzfIqMxT\naRC9mOyOSO+4yWuauTbrvVqCC4XpoP+uDSbL5dcM3Evy4hI6KImeRe2bI2nw\nPzbyzA+7dbSu+rAIUrCmgwB0tET43zPYNCn6WCbblwPgr2Mimno0MIeDeUGZ\nfwUFqJr003CB/zFBkLczZOkfIN0d5SZ5AcYVWP55FKUDmj+xgNGWXR+4qLWD\noN50lAgEhNhB/3A9xpiQfS68/gttOCdgP9y17T1BKnxUnQAq3jkb/oyR5FL2\nzCMF5N8avXHDxN7hkkZvZNI8MyumonHHvX5wh/zmKuPg7MufuRzF2b/Nthty\nvxHJoi7Weydj/IEbFkxCOgLdejiN76pDuy7R9tH5PEgP+IPkkqk9SguxwNPk\nPQWT\r\n=bQ3G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXY3txdIpLUrmOzjYd5lEOKMqOXftUDj2HP8SerPvKbAIgMBhXNYnZ+u4XDnKBqAr0Is7UL0C/pnp+9rn9og9Yfv8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.1e73da49.0_1585171798049_0.8138847826814533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-button","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-icon":"0.15.0-canary.bb6dfc5a.0","@material/mwc-ripple":"0.15.0-canary.bb6dfc5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-VANQw6VM+4SYMX7ZtKlGUxnZbfW4vPkJfGV87PlDvJmTyDh1BP8Y1D8Dbr0cgoTNqSeiKjiEyj9FKFW3EnGWFw==","shasum":"56608d7b951c47e491a92454a459462ac43058b4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVV3CRA9TVsSAnZWagAAfvMQAKRXsMfI9fCwfyb8Z5Ta\nbsUaTQo1+e5oRotehFA7ZE+3qMpIiPmdeP4CQbLOsZ9uytN/UoNRbPaG/loZ\nEMgNWiYGFfmfflLA+v693IbcwiitBgqCu/BF877dP71BMXeMz31Zj4NfU1n1\n1+jG3ZqaJIp1YOojX/bALpMV9ioFyq4Mv2kf+v06ks+htLv6P4upSvZz/TBk\nQ/AoqDC5KvvMiF03o2II5VAMBTXMemgFW735purz2pM7D5L61SIMBLqDYxR2\nbmaB8uIGlmVvhrcyUep0GvYWIfa22js5sY3uhbuTko2xuepwrjNoHs0zsTf1\nX3ZpDSUmSYIpw4pMH66+A06FLYgoJocNkQGVqUjg3LIpAYiMnlMmcK9MP3XE\nb3rOEOkeOoEpN+WQYXoMmqvRViOJcmtqTQCGLs+fg6Xj14Gz7s0feb5hL8Dq\no94LsV2J8OLxF6Oxeq48HSLnwFtdVMW8SC9a7AmaOe92jaCh7j5yutNvGx1H\ntNT84Z7ZxZuVjDhUcu0zEQD1+X7nITzTOJxK3MX1RKrWSP7yKX5ifVMq3NrB\ndlzAgW+hm05I1kezkPqgjAxTk8rnyq8isDtnoQLFezdOg9Rh4nAEES5wHmeN\nVIasiHOnI1lM3MFU2TC9lscCWwyXtTI0Dc/7j051VdWaL0FidYi8T7gDaNw7\nG/80\r\n=Ifsp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU/if6lzyZVU5MDC1QnzAzOc+wnHgF+8XgKA9kwnDwlgIhALoms6vvFLgkRGBuie9mZ4gxtIckTbduHkukzBKet4Qf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.bb6dfc5a.0_1585272183129_0.6020100706688019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-button","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.10af6cf39.0","@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-icon":"0.15.0-canary.1884603d.0","@material/mwc-ripple":"0.15.0-canary.1884603d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1pMjicIG91tE+pfJ7s95OmDQCB1UNIlyw+H+1viOzbxpzyGrfxNGCENsBzxsPlbYKQl6O+YtJyzge7ihBLeVQA==","shasum":"4634a36fb2c431b683a454de18fb4641236624e9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflotCRA9TVsSAnZWagAAUr8P/3SFHUDQob0sbZFTwGNC\nlZ8x4eB8NO/SOS9vfCZY5+D4IcLQG2GmrVxJm9FSOCjPpj2UThdPw21RbV2Q\nga8M/qVn9IJxTaD/fPi2AO3vzJXLFncdQFWhIzOWRgwl6z7f+hmhyafJ2lEu\nxWdVmksgPE1QP0f2WvjzCjWoCCJ6OPYybgzrwU6ARi544U/RF5gTAgVJyIwd\nQTksc8CJl4GkqK/Ot+/tbkIF92VGS31J0wOVhaMPXFlE5Au2tvQbwYEZ+fap\n/kp82MPIyy2s22rSjfADJNCdcW4yCPMmrqsksl336WLf2LFnVWzd0r+6i/xU\nUQAIkXYtsGZwMwTxqam3oJjejas35FB1cHrz9aNJ5rU6qexvNTIXhcDlwUAX\nQ4YZKwfcZw3oc7508R+g1e7AgdyVJ22q08ViFJX3nccCS0rBS5iTDdAYJ08H\nS2ninMHui9vOmevZJpazFy7B86GUwWQGxj8A16G9Gwpnoc9++PCiPNEZsLwl\nR3AE34EjX8nTkk5eCLyLW+ifmh221GAWOkz482TwaufLM+KaV9QLyeyq47vi\n22QnklrCgBNW5m3PbCIYDJMHHXN1qGaqeywQGjSqJHy5SmnIkC7MEk0jtb2o\nc9tCZFygEwLPK/g8mwfPxtfDTAEC09pFwVDazcL1TYQhZAvGy8rO3224CYmv\nS7Ri\r\n=8cVP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBmz15KR6Ys2RjIjCczgh4/kCS9isb4l9whD8smvp+nAIhAL8VozUvQLWXcCa68zXTssHPYKSdKmQCspmo+zGFYgMu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.1884603d.0_1585338925013_0.4480339320033866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-button","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.d6315efe2.0","@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-icon":"0.15.0-canary.aff73cab.0","@material/mwc-ripple":"0.15.0-canary.aff73cab.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-5cw4Zqh5QFbThingZqFkJzJnY3GWf3M/3bmyfvo5HOg6yV3IOkMBrs9+M0Xb5a5Gs890zemRZfPwNZGZHV+l0w==","shasum":"a7f13a92b1d3b84b8f8abbfc66f78a0dc974f0ad","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmysCRA9TVsSAnZWagAAXuQP/2ECKwFmzcocsEVIeBgr\nm2/jK58Gy41XCeg8CtdpE6U2w1C3Edztbo9BCdYKq+5DMxunoSmxMK2J4EVl\n9TY56WNZ/WJw/cPqbepfd/GjI++stiLImJstPKBm7A7zy5piS1HxWbQKw7e6\nCATqbEYz8BOoUONLnW5fRhEPiT/knzQi9m+NwpNJukj09GEp9zhYkjJ6SwBg\nbk9NCvKXeSGRwLxg0lm+xHLWn6ioZOeCxjSI/u9Gt83+eSsDMWu2nerzBDOd\n83nrBGbHG5BHl8Vb0q4dMHs+kNtvKeJRijS4MppW3AIoCQBOQWSyfJZOJpXr\nkhuYzk94w+nqGgZ/jW2/BkMsvkNgCfYIsfNKq9dgiDeoZTLP/WDH0l4NmETS\nQChNJNyuXe9PPUCKBr10XO9/4xFvY7ajNvZmyV/HevzAqb8YVE57VESGROHM\nWtTiVypzmGUGVn85hGyVDJ7z1KMrlNOeGZSlXOmyMRQdN9z+VDR8q9MQVp6a\nLVi/4Xo209YhbMIiHvDrWu/phUZ1N8yVJnIkgYalGaA69Hbm6tYmX2ARyFCe\ni1NuBtS/TwarTac2/b8nEF9MAZb7FrIgFX/VCP3B5LufDfWmJAljtitUcxZA\nZSMd+zJZfsnJyZ8dv0keTYza4dLQCS+RBP7UT2Fd6qyq00Uefp8QwU9dTkNt\nNBfD\r\n=ILC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXWv7a2O10UgxS4genWkaTfCDHphtGGpvUoRoDALEV1wIgUJCyXkiMiPbZdJyruO1m7iYCAVF+NHExFgnkwwLTxMQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.aff73cab.0_1585343659817_0.20413478205208535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-button","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.a3016368d.0","@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-icon":"0.15.0-canary.63168f61.0","@material/mwc-ripple":"0.15.0-canary.63168f61.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JYe3pg3ntfdmWKwAsmNFh1BQx21HnNjzAfP4R3PJWN+gZ++7wr2spYsDAztjMLh27boWeuN0m9bIHhH0AEnezg==","shasum":"0925d7de798509f53884990921cea1e0eb687f0b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gNCRA9TVsSAnZWagAADtUP/2hRvqX2Buc1i+F5N5ko\nrt7l1CwjgGRKSWfncYLbtAWqDT5ASOXfaM/taX2DW1yaqBVGoWAlE3SLebVi\nkL6P4E9ABBao8009tQIAeJB9xszL6YG6cCZmEbe4kTUxN9DK3ZhGMs+dAYXU\n1bqOyzq0FjlTxV4kdjR0GOh6tjr0z/HgYpstXSIpkAWVnfDxfJJqUPrhwZZl\ncTo+25u67g7NI9wYDQKauPbWYeevp3s4QwMk5Kr7FVZz8s/gXtoV0lvDHR7h\nOdGB9TBkwl2zYCQgDlZ+NhXXwpfbCi/A/yVys+ar8OJulb7/p+jwu1/rjQK1\nIcS8xNuXdAklL9kgK4p5Pm5vPqoZ8tUCf/zajckzQfEZrwrwRJXdyKNWqjec\nQwATd34gk4sC/qnY9k22ebNzNPkdVe5OWcIMhsi1G59YJBVS+caH1hKQPw4D\nHkhyGiQrcpAudsvI+10wyrcpvCp5rpWX22rRSs9GS7s86ZpUNTT6zyl3L7aA\nobmt5WY+C5+HdD0pu+AMCiPCgYypHAd0o9WIDxeabGj1EonYfmcDon+KX9a8\nEIOrS+i+HoLXEcOXT2hvY7ERPrLziJ2VTOrK8laxbNtW1dljejHc5J70Xahi\nC86jPrWamA+BYNgdyHmL4RckNA2rSRXKwD6/U7nNbykNiXw2lYrDo55mBUVl\nq3KM\r\n=ngJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWnrjB/6qxNtAq+hGUEGcToeHKbPFx0jwDJxhHzckSPQIgBhbnNX3KOHJ6pYVDVm9TDVndK7mQ2hbCB3pEuX7gkIc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.63168f61.0_1585678348492_0.824969023361521"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-button","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-icon":"0.15.0-canary.9fb79b3e.0","@material/mwc-ripple":"0.15.0-canary.9fb79b3e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-NBx4nFFA44v4qV9Gu+s1F9D8FhwgEYVzGFy5Ecuu8fdSHZp1lCE85S0DiULdmjTqfCf1kBkpDSyMK0hvNJJKiQ==","shasum":"78fd7b1b5c246d327494cbf0a29507be3e56c493","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QQCRA9TVsSAnZWagAAU3wP+wc1ReaNIw/Qx0zm/csK\n6Cko3nELEvUm0e9TGcP+3qgDSng25ZKGgqzlQPRf1J5S3h9TL4F++0G3rOb/\n2GlOArgpOYunwqrBC1KENN83VoyiMH7hl9Gf68o2ymZ52TmSRk0TdGhweyOx\nAOVybsnDI1UJC/98tZyxx7ohsfFv1+MgcU9kTIX8j1PkqCvwz4k8GvpDcb7n\nREdnx/2sfxufG22R+aEkrz6K7shslBHuX2uWkJDd2dy8JalsY7Z8oe+VvZdG\nj1YLEUsCRssmHBUWllW8STkr+Pm7H1To+KeeOmJxPZGEnp1Wbx5Aj7COpfAE\nnPOSQIkRpgu1P0/ssgPenmLPYPyy0y0gT3ATvS3/Zm8PEiBnFruLdFn6wqVH\nnlLC6vziOiPFpfXwYYfVxCL1FefMTq9sixB4eLGsLR6f3Rcajt2D6fKYa9fS\nFXnO8u2VQFFO3PY5qlGdx64Nq7mDT6Po5mVwluzGsqdiJavA5vRFMcKXG4MQ\n6CQnvnZNKpLiTl3gVB8/SkUe6VEb3NpUU8yTUUKBtiZc3FeCq1mHMjFV6HAM\nA4c8vdhQKfswCZi2XlmmLnRf8Wl6x2Secx93ex9f5RPLAXZHUhtVcY/ZQ54P\nWgc2SJD4/iWHvqnY4RmfzrF2W/a/2AbWucig7mNRff6wKIDdlqzhxyG1Njro\nkbQC\r\n=Nphe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZmdVoY3C8XL4jEvf3C1EfUWPM0wtiqSYISAHJp8m4iQIhANChbTwB6oxkcxCwdHWqbf2tpz2cwSPRZTnEcvSwu8St"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.9fb79b3e.0_1585689615773_0.43546817499851564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-button","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.4b45b6620.0","@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-icon":"0.15.0-canary.9bd3e9e2.0","@material/mwc-ripple":"0.15.0-canary.9bd3e9e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-If3bz1iumCWa6g3MrgYTqd1H19V4oOh5a3GdaqOpKPRLqjiBjB4RP2tUF/KGgHHkYYzgK/h9V9zsJ5VpmeYJQA==","shasum":"90c2a8a5f4ac4d8929d671877a923c56871b2032","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":83157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg90xCRA9TVsSAnZWagAAU0QQAJswdsjj5LtBOzlUPfqH\n1piblIpChHHQtjpOVacpKj2FLqgqsB08+jK2g3pjD5cVvE5WbNQrc14Tmqzs\nqxgFbKFZbkTdPgJjFhStJvyKZg2tuoHwex/mmixQjKcJsxj5GNqHK/5CueZ9\n74QoXFn7GnjJCeuZRwiDWmXfK1CMY5alIAzGPbhR+NYEmwtNVVmPNjdiCfy4\nrnC2ovA6PEEL6JNB2fJKYqmd98j7wfNj2IYnBxT0hMT0GWO7AmrWmQypYiSL\n5FFTykozp3/HfpxoYzb9EYOZJArnr/A3HhU3/boDMGJAvuC2N7tG5ixY4eZG\n6iEY5UQH4UF5qO2C3LgqwcA1jSquRXJEndhIIb/Ub9N0TrN72IcX3Pxdi+H+\nOEX1/N0WwSdy2Hr4g3XlNLiddv07bswLSKeX4vd5aBQJjPddm3UDnOyJSKFd\nrboqNHjQhJ/wZVXk63J7uJYqrmGay58YAoljJyX7JZ6hi5E65E+Ot9lAQSfW\nWAo6kNmB3ZOuo8oNvoDupQ2G4NzJbNhuHYjBg+fUaJhdmOjYg6/xRx0gr1Y9\nQCjg9khOYsTzu4vaEmNMIS40BEgRbcVrPW/JLOTTqmwPBtj/RzFjletahu/n\nVqDGfqDq0M9+jFubHqPXp2uYEKnAjRjjvMNMkFnXf+QkaXEmZ3+tIAgdM0j+\n2LRB\r\n=svuA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHC6O3oXnIR7jy+pUF5z0m1V4/SaBhGCml5qY7eEDXHfAiBUoYIfaVSruYMBJg89YKCvYgVZ3sGcM6LV+OKVWDdtCQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.9bd3e9e2.0_1585700144831_0.8820241326949201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-button","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-icon":"0.15.0-canary.072084ab.0","@material/mwc-ripple":"0.15.0-canary.072084ab.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rBMz6DK3rcHGAtasYT74gb1X9b132Oi3L8vGD2DkiTU1yhUcYkigXoOn2wtaCC8uXJ8SwYH9AHEvQXr3fOalxQ==","shasum":"553f8fbee06db9ffa185cf9bc000ce3b291648d3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":83155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehN/0CRA9TVsSAnZWagAAZsMP/jUgdy1imBL3gOWz4phA\n3HEpozwm9+TOzE3kRk0wSzlQlikJ15k4IvEn08KQfqTBApQQP/L9s56cbzuu\nYrU4XHOtG5q7qTPPgJqnGaHtTLPyHvOdebDX+2nLRwr1JxY+mCvar/Ho0+s2\nJl4QONpFIP6HMKaJwMem/s/onHNx8Ec0gB4WQMPvOcq1/GhvL74P3FgWBvaN\nh13ybjwwtohWRhAnbwX7yHRRdNdGA4EQCkTA3glEVT9e8pKFwgkUiQz7YWJx\nv2Td0KNTsvpJnFYhjvAhbC9OanulhTdPi6pgkfQ715d1PpmISLGhtEu3ArIf\nuMH4OWUxZ5XU2J2fxkhrDGmwKTkbYZRImsMqLKCm5SCA+nYWLbGp3NWNTAZ/\n3ggcvQ0Z4BllXF6i9YXZvfKKjiChjCEelynbvScEEj0/FCMaAibWdNkQVpAW\n7MqO5npOdIAtifrPCl2p0qqukisSw1gN8P+lJfVG/injUJpfNydBoGrYHKA+\nS/Sb6tDDiaYCbKNGcQuiWQsyJZre28WxWMnSZTJa2Z9eg3hSoT7NGUBa5haT\n/mm+lL3+GNvI1vwKC57EgiAINSS89i3dvAf9FAvTnuTBzYKxXSoNQV+cRSyk\nRRvL134biG4YnefqVi0/97GVfc9+j8KPOp7M/F65NZTpLeeNi1Zv9lEtzxC4\nD6bH\r\n=pJtL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6SDCxUE4LSpeQAyq7V35KFu7jV+uhn5kAiOweB6wNHgIgBAOuNqbkAViFrPTmtdUqBa/rasJZHUqhpIzUy27siAI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.072084ab.0_1585766387692_0.7243184789845301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-button","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-icon":"0.15.0-canary.4dec04af.0","@material/mwc-ripple":"0.15.0-canary.4dec04af.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-zzt+I26JEjc2ds+acElKaxqviBYA2xTmBNPQtdjEhxzD8qOQwDVvbCyuIMOo8WEEqvoB85QChvB4QkUa8uxPrQ==","shasum":"2e4c74c94e9e01eec2fd31abb63501b557d55a80","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":78333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5y3CRA9TVsSAnZWagAASfMP+QA6E9LW1OrthqvfgKWH\nQ7S4xkfxDM7SgFOcHJd09dRDJIvvvBvzTv9Was1/Wpwgsw94PrAKA4B17sqV\n/iswULLQReu//3PZTAIMDi987+/fGsKeeRiQMbaIObaZ6xNUVQz2POC9m2lL\nmSEtZrxaLmgYKU7i9JCjnzarYjAz0pNOr44QQTFAvDwKH8o3rpBt+1zESzVU\npoQ3yS4a+jdqW7jSMgcbTwulLIrJU/YSu3lBH+mFBtJbhIhqM9b/QE77IXuC\nUahC+p3oK+dKp4TWvCG7NQUFicGhm7j8m3j/mJBx+8iASSHxdqZr9BD0NKlh\nFO8h3oLJ+KZPtDB8QPQrULQ9zVyGPbTnSCWjByRK8CqiQZd9kHFhvL2dx1bA\ntddud3IifIiRVmVGvVm4wKmNn5CfxT1k81uUrLreeiWn3GxBUANyflCQA/NC\numrSGZI/l/Djte/gb5KTlVGULSEurXH+I3W2waPj/MWDySjhOiN+VbwmHonR\nf+2ViETD5TSkzrtdlA8SysBi4wdxLh2RJqbtmgUUSethDZkbCAz0OIeIJtLB\n7EvgibV5KMyqsOzU7PCO83+tjGsof+JuzHHIyFUeDJ+sklKmcEgs8J82KRw7\ni1OyZo4XVKoC3EX+FBN/YYActV23YxHOMAc+DCXm7riqpeNprKeUNd7h7MRf\nRJoN\r\n=oK96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCysh62CpGTr7cmi/+jIVfXeLtOtYo+ZWpux02oYhNb5QIgQMAdPq2yeBsUCvpjr6ry63VBYryhApWEjrXyWLjoGdE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.4dec04af.0_1585945783072_0.7367066264591944"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-button","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.e84b9c8.0","@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-icon":"0.15.0-canary.9b676354.0","@material/mwc-ripple":"0.15.0-canary.9b676354.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EBh4bNUZe6n1amvczoGDARqwP93YUHvCykVLnTpzRvXDv448T7Li8j1EMC1ZRmtTM0PPOamRVNCH8dbOUjkFog==","shasum":"1d9d65c733b12ada1a30815a0fb53775adce06ff","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":78333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zLCRA9TVsSAnZWagAAPWoP/RCj+aaLrFAIPAga8jf4\nW4iiymlsiq+7LXsjKGzCNxCmyeYp1LkR1tot+p1g2FJzZ9/edDs+vSCxOHTJ\n2JPuWMYJz5Tk+Cwk9fCguSw9CzrTPGL/5GLsvHxwoh86fOAZJzeKvo8cKFso\njWqMF3h+lqZXVujae6mWtNVRXGMBwBS/U2udN2ta8dyWLP5eqyoeWzJnOciE\nU6RpwNTeQXlGtifJcfL3Pg25kvcszAPXFKFUAiy0O2eNIDexkqTHp+/E9eP3\n48wx/DN6u5pJtZKj3VEod9lXKnbya4cAO60MWX1ELxlXNqnF8MV+46stXi1B\n+ng0icIzZIynUYRlLjRMqJzeFY9R+gskBkSzXqYNdXoF5h/chT6Mqc/+93D3\nqNuVpEx26ew7fQZYzvHAQLJEygUqRSYIvzkedyeIrQlRoIRfh12lFORqzTsW\n55V8M/f/BxqciLlAQXHzKIcw/VGsbSRUBPsjtyBmZ5gHn8ui0LrglfjGTfFY\nL3DALKqOM9xz6RD5McYvbTrJ1Do2Ih0j/2C+mhnlKntGVRd+r9ziX7l2knmN\nOU6HDUGDm0uR3sT8dtnyH9Yit1h5kcdGvzVD22f1kAASkvgAUbHaa5UWdEAu\nOvjdsx4H8Dur3Xm+Wcy7HWrEWsV5okDbS7vDp+LwNCS8QyCHmyLiNZsna/gE\n5ZM6\r\n=v75Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpW03fxWbtQNNONQJWS7RcxBsmslECofC8nJo4c93YLAiBCFovzUEriq8a4g3o5dKw2u/w1WLPpyi8EMidgZvnQgg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.9b676354.0_1585945803261_0.8979208667962097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-button","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.f1f8e60.0","@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-icon":"0.15.0-canary.6b946095.0","@material/mwc-ripple":"0.15.0-canary.6b946095.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Vb3KK2obGV/R9UAUglA4aOC6fK+4tF2RIfAu4CAsRSjE0KlWs4jP7uPZpwBhHu4GP3ZdcJi+oY5vMzM+DzqK9A==","shasum":"f1add99b05e4607985e64e955096e230d1d52f49","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":78333,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6l5CRA9TVsSAnZWagAA8IkP/2gAC5vI880DKZyctVu/\nPsyAA9n2bNpIxByo1uopABIC2JuVb+nv6R9/qYulosFSqG+L5YtXELhcCFOF\nxMKLMakDXzjtud62sssHkR1CzmwqXQQy+gigad7uQH08Ypp4VL9hUar5ZtMS\niLupHciz7Lb05CYHT5G8tIvhWZNnQh4v+lucbR2R9nT8FKwhi0YB4/ERU+3d\nsAB4pnhfz/Q4GFkZ7h0A3K2c8NS6n2cWL9wNoMUf7XNqR1qSTmhHqmKRUtf3\n+MNcnWUqH8dFD9ASxB68PcCwG5T6LU9Fs/J4IPdSKEgq7hV/GvwJPosyxF6Z\n9YtXR2aZVtu740hrfdp0uTqpeO57R114ALfpHoOIuat2N5+ktymabWbX0okP\nwgvM16PZxd4RAtkIS0XwZ5in1Sp14xwQgd7tV2Xd1H9RnvWHFeaYu6Yc/Rw0\nYPrY9dHCzHK0deP+WgwRk+/ms0+kLSbRAV0skzdJSHSfCWkW8SkzCCI3OuID\nQ63Xn5r4aHP91H6zLKazCGSyWVvUxCFkbV1ZgFLqmpMMyoosJuE+EtVtk5m2\nl6258ffNiYJfYooxFoutcbSeWUmor/Ufisc+kpOgBqMqDNPutIsuLUD/rb4r\ng8dvhJYAK+ES8/oEhPfzKKTtOYMDc+KLS/2Dx734qSB5BpAtGxC4AwiljNEs\nJT0j\r\n=mTaH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuUGaALWiwZlEI/MCE9tOgyfxORFkqKySHErqUW+OjjAiEAjIH7VdINHRc87h9LV2S6//Hy7njsuGSFYMA/Q5x6Ugk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.6b946095.0_1585949049050_0.15435683170508852"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-button","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-icon":"0.15.0-canary.5ccbfaa2.0","@material/mwc-ripple":"0.15.0-canary.5ccbfaa2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8PEYavL1KZZ7aaPqfaHrIY9QWOqW/iZSx4LwZ7sGHGnTTQR0vrJG7UEhIPmpd6Rp12/IkHAzuEqV0pnkYUz6Xw==","shasum":"2c3acf77d00ec248b5443c7ce32bd3c29bf2a5ad","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":78335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rDCRA9TVsSAnZWagAAKtIP+wfvDK4FSf6Hrk8c+wM1\nsE5Uq+1jcCC5yNyL9uPvPTXMhuwK8qOew7+JRznHBoJ0Sc3PG0XnP43bed7O\nWEDoIhfKF+AQ6LMJEvc7Zl6Y7JDAthCd2E+AS8iAfM8sD6z4Kg37hhWxtiVf\nbU4BDJgorX7BqDPZjyvgyCEKfAtmLGovHMxyQl2XURbI/SlKWjEewhHC2iiR\npoKEw51VSB5jhr+vXK3c72csIVrju8TbsfflvBHCDNx46Sigoa2MrOgquq/a\no+p8CAZlmex2PA/7IC3498U2yozDiYYPQO86olup9OCTcXO/yePc4MqWkQHR\n0Jbru2H8vU+Pe236jh63z40TLirh8S2xPZRMMSq7uGR52RC81Ct9YQiLEV5C\nSVWC7fXc1bq+yBQTpRHcDCB2qXDuaQBGVI/Rdt+Tc6sq8FfRlrDgxTwkDIxf\nYrLgT3n3SaPt1faDYYh9z4pHW6pX92d6lcJ9pGUZ87uKTgD/ZIZukvxP5XN0\nerpOy+FeEzhO+QP//EUgWba3c1pYbhYWu2xyHNNkRon62eMYqW/YC2fGbFIY\n75fR4ian4fGcBTgqq4ijULNybpxltyJkHxIiydWEdzMQaaZrhojpE91wVbKt\nLTQKWtmDivIBMjKABdUdnXjQFnkl4CqyKDzVwQMpTi26uuWZdTAv4/e5X242\nE91p\r\n=liNH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7cChEft2NISV//BRgA/TWj/N6O00KkbaMi1sbIBVMSAiBTbczDaqvfwdm7v/fKgLrup5wuCWZFwT8Kyl2xIqiPWw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.5ccbfaa2.0_1585949378727_0.3644374350815689"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-button","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-icon":"0.15.0-canary.a0ab8772.0","@material/mwc-ripple":"0.15.0-canary.a0ab8772.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-QLg57IaeeQXCFWe5O6r35g+EvzIs+UFfYocrMRpbH9sg5ngm95G+EQsnZdk4gPjwIwTzwFtBi1pzVMaWI6G7oA==","shasum":"fe33a0a146d5e6de5d6089aefebb2f03b06146d0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":78335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3UCRA9TVsSAnZWagAAZGYP/0kngMdfFupvCaGKJkW+\n9Z33yafau3zLfHbHTlEql3YDD3kjxL+u1+51HEQNSzoCKsENRjJW8Zw9DNPv\n1g0otd8QriNn7TZjmjrT9Jk93+RP8MKVd6uzLlyrjWvNR8Cvi7mWQQCjQYJA\nGaJ7YM36a2IjuDP9bAJM8Zh5iLDRJX3+AfCr7yTjODahT8nvFhFAYjThgH2I\nrCs2w3B1axKm8HY9vJRK9KdCmhtZIzl9fFoJibn7lyD8EQR2TQO0h4YwLb/g\np6josd/pdk2OzNyh2yQ2SqGxUvSkP1Foi2NcBmO7M1sTkZo2W+v5xzdjdCAr\nxd0KMXGmvewLpvyfy79cICDEJUKJ2H6/T+ppO+/QrCpKFi+FWG2UgEAUpsZD\n4HKXtW8PbATNEpW2Ayiww5FaCQfCQwi0XfRDBTIIiVnWIwL5eZQ9LHuDBBv9\nUWJRkug/6EFrgAuqT/uq4EHUqwP5CM1rlXDHXB7PMGLKfSj6dlamz5WQmUQm\nTQALS/m5LtPPQncuzUkXM95OFNHjX7Ad8wgOMccia+sB1lDXMK3/IvAjtFZ7\n0GlDLzEa+51qi29PJtBUsZ4BKbRlxzTL1lcj7xhLTSeV94IVep6CRYgRZuxM\n6WG3VPH1Y5PT6TG3/1GFYLTbg+OGDyfnee8o+W/6+LAtXxbefPvafyECd8Wq\nRpc0\r\n=ATjy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG76iQIaIFBLwoYR/Wmz4xdaM16v4xFh+9Moc2gJL5iTAiAU3PjyewY5nfM7MmqWLjBlaxAXnel7Znu8Qk/73YTmcQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.a0ab8772.0_1586290132469_0.24639236261664665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-button","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-icon":"0.15.0-canary.8d352305.0","@material/mwc-ripple":"0.15.0-canary.8d352305.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-w4kTAuhN4k+8BiP65HBADzW6ARoWoRlunhyG7qHQimwbe0W2Nx5rN6mhvytR2KOyxG1ghhUVdZELN7nDyWMKnA==","shasum":"6337b7ef6420d15525e01056c5772adf264222bf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":78335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPOsCRA9TVsSAnZWagAAqUcP/i80iKbCNuUljHkwqqwB\nJIQLv/1RK9noo3zdhXBWeodZRAAXihWm+9XSKFGVaxkp7HSV2IifBrwqoIfi\noW6U4DvX2uFhCZ3I+QDMRnROGlVIVO3bO2mHv+r3Y71CrVOdcE91WQsMEHQW\n/Tq5cLdAOeiS2OHtIuG5SIDHtFX2q/fS6jhBw6VcAHdSAVmw2n6NMvfJxE5X\nzXhh/6ZrbcHeuZpAsjhXxLc+dWSMI84VGYFG7jWD8dUP2IegEpeJULECPXWQ\nsAFUejmUWDH5lBj7nbz48UlilvzeqIOZTyszOTYMR3KQnXHheD+GtEdBJppV\nZkSMA/Gop20lXBLtjyVflpI7vGKs1Nbw9EQmfl8sxXbMPdjB8WVUV/qdyyyO\nq6bKOfC1Z0sSyp/jxmfJn42Mq9BOqnh/+EBg48RmgOai3oIu+e3uullmAWdo\nWvUZ703fju9MCLuYlEbOeyMFZKwur98a1e4+FUgYf8q+FErJRi6lvD1ohNiZ\ntR1KLPsxJ5m6Pd/7FxKzBOnZe6iT/NUlftHipwfeYJklwON219PqGfOKX0qp\nOxhyHODurU1qCeN3dme82BLVZQz7BxiiewypoaaEDrp/ZZe99CnaPc19s9yS\nueZSlavgvvueM3O8IjpREEUyU5FVOm2ETpozqVnoRBiBYrRNT4NQa/GyFWcN\n/0Vx\r\n=76hD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaM28nGdSCGKvYua5ogAkL7G5y0up9tdawqbZ1nrwSCAiAMPcEZAxC+bZn0n36ACjLnjbIADbJFbyVTYoExUD6lBQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.8d352305.0_1586295724034_0.5605055931687233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-button","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-icon":"0.15.0-canary.31eac79f.0","@material/mwc-ripple":"0.15.0-canary.31eac79f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Hxyn4TU2ot78pyT+Gnp3/ROyQFfr1Z3FinejgPUXni+upJ+ut1TiuBX1nYtexOtiEEDZ3IOLk/kDaphPLOE4NQ==","shasum":"29abe7876967437f6e2879c59c882c9d5470abde","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":78335,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdGCRA9TVsSAnZWagAADWMP/2B3XWGHRGHNKeS3ZnGS\nRTeVxuNYqdoerpPeS4VVn5eOKFQjJocvgrJwyPPSi+fnKHp1p5Dfx6X8w3dl\nSuFhvlvHKPHEm/k3XVcry+RhRK+g7lDKDV/CJohavCeTHG6emwWHesc69wK1\nxkyXlxHHvIh773nSQEloihc0oY6VBoHd9+HowSq/RRMd5qD5Cl5trzgmIPh3\nGWkauGcvaZKY3A8F9oIDcpma+yerk0JF9rea0wtrnBk1lYxXE2qiAaf0Ftyg\nLpqnCEsKDb226azUlRecbHwxXNd7oDJQRwQQcWemlHacYwSKJHv/f3pVxkXH\n0niQwRBz+bABxcyQo3lrh/y1+bhT3klQg4YBAs9/CE9Mudg1aNY/e2xQ/rk5\nleRlFEPzRkZCP3oIVZezKI1Ce9JXfZPBj6ke4aTfA9Gkc+8cw7Z1hXuU44vP\n0Rsk9T9loQmUKq9keNff/9Yepf8FeYSNOWbZPYqR2o7m8w+zek78XVKDsMIp\nWRZWJsgqETr23aPNkPqpfI0NeDzjR2JJoX/sTxMDamdxyUiGooNuuQU4B0w5\nYSBTknId7FEh+cvvUr7lK90VSyKZD2Drj+1aeU4veeLZmnTaUF1GrZDWta5B\ndZRqrXib+9Zj2mQ0jm6U6PLUlFI8b8KF9a83om5qOXamA7qp8qZscGVI+yak\nda22\r\n=mWS+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBLTSockaEFMiu6765n2ZtQIjNiZJhbGaeanLVRp5p1gIgeL3LbCN+fzssP6cf11a3PrmvyTif3KQsQrqxDVksBJQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.31eac79f.0_1586296646378_0.753981349046349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-button","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.6a40ef217.0","@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-icon":"0.15.0-canary.ba05565e.0","@material/mwc-ripple":"0.15.0-canary.ba05565e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-K+b7T7vVMa2VdSUUs+KQ4y6YvGgtJ6KBe7KkFFPtdeN2w+0R52qILpvlD6BYivOT/veCS4hfxkcti9yYXSTUkg==","shasum":"6690a8052045b763f6ed36d8a06b13ad8c3dfc63","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgqxCRA9TVsSAnZWagAA0gwP/A1Ceno6Syu4S1SO0cYC\ng13XoC4JiAl6d0y35OcJ3ySd4+avvBFnx3TjqLwedUJkVjE+vAOTbMSwnYpk\n+ujFnpUlYm0LHjcd+B+axYWzOPek9lkoJ1BvSO/+OvffycVc+Y6D1XyOGx/H\nK6Xj0TDJ/fsMDfBQ5lrRFFne9Qo0GZuxumDK+B+QMX3nKwMTYbodG0xLqPGt\nBuJ125VbVS18zQxwgSV+KvrkdoJ3KzAlMG0tC7u8iD4GL+BpdAmlggbcytu3\naOkUG+hQHSnmAKUcut9L0HwHlfH1+OzNxdKVeBeuHAtCtnDh6A+0Wc5TkSbh\nsfLlmlHA10QqVc09Hl65rGbWXGNHjkQJXzEL6vuix5bMu9cHOAghwaOcmbdw\nIMWpFHo/fh8/U425+Rax6iMPWvEX+mLj3+zXfU6xdte5kXrcvXl7RJSw8PIU\n+2rGj3ehvYNYZb76QGxHN6tHJXu/UZr0qEHsoqEynkObJBP7dyMhd/JsCiLG\n5hGarvZjipLyqgdk476+cnovl0NesH/GRmeJOrFzT6lthR8QRQmUjMFyPFGV\nwIRpJrOIT0N1Plu0rYhDYoOw6v0vaf3OqJLsgs3WPsVoh9J8JYmLUHyLJJ9+\nY6pgPcIcIRS72FjQtg/+kf/4Thhr2RsZLzy6QnXdh8TmPLM8qJSXvIY2kJ+h\nTJ8f\r\n=aBp3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRD0Sdsj1bPTorCeVuyTHAG3SiSPOcpnb9qaSAfczxhwIgI1VmPx8dZDWJ0YSp2+EbgDEcMDMXAuHzhc/xpVAQnw0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.ba05565e.0_1586367152665_0.3471212087982085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-button","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-icon":"0.15.0-canary.25099f79.0","@material/mwc-ripple":"0.15.0-canary.25099f79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-7mBMtjOUSwRVOfIuBaBSXFPOBAFWhC2/aD4D95VqZsDGFpFWhE7ojQcoLRxiSJ89PyU075vbnR+dSi3qOxqnsQ==","shasum":"97791dd2de376c1bb2570224b58a3780229c805b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKACRA9TVsSAnZWagAAb44P/1zGVFPMa/BlT86FHdoA\nx0FNIditE77dsU0zMVkUXHHyX6lKv8YwEnEjczb7+x5rDuoGD9H60P8gmaYH\n7HPMXd0VDAY6xmuXVHPjTYMC37vT0JNdrravD+eTGukxS1BNJI3DbhCk6Edq\nJdUPn8EixhLJmDvTUTswbI4X2hkOSUfrcB3Z6pmwGP2IwvMyXhb9tOM5J9xz\nm4q3Fe4MHYC2h9nWVNOZfB27ltlxEJoNLA27HISlb/igRiu53i7eVqRrLBLi\n/osEmV9/9AqBzftqjEuqk9wj7ncTS2OxNND7BqP15KN/dfhpMgV7QmoiaQeb\nqQlZXV06g7XwazUM8iQsWmLtHOiz1JFdjkh0Zuak4J7exQsKdpDgXqfID4Tp\n0qI/k+mKCR2AJEaJc84CtJ15no5LNIPre717CBMImBipvTykOh6yezKRIS+p\nWjy3OhyRcJFTBPJWJCaf1Y0Zv1l3uaa2V3M/QvKvGiPDMHBjOYv8084syq/r\na86mDzzBHqyUOYujnerHg1Uq8Mfwrc09sNfA4lrnBCNEh8g6f0Y3PKPxv8wD\nD+pVcIZ9jR32kfdLksDaW7+rOOTdB5ell6sWDYniAD+PiZBpny7MAUja2xT2\nPHf388MOUx70YASj5tou+c88CPAo15chAFFVvjHoyh/mpXQTZt3ZODhp85Ud\nwp+x\r\n=uS0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBx3eo/TGW4/z0mAzF0531LICzdhfaTGB8jChnqkhBibAiBiaSytc2ACu2tHxmhGqZ128ykq3H+J3c2h3vvjpx5Zqw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.25099f79.0_1586381440490_0.5995433608133331"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-button","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.9930d9cc5.0","@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-icon":"0.15.0-canary.447e31c6.0","@material/mwc-ripple":"0.15.0-canary.447e31c6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-eJ78iNa7Ec7kEcdfdPGMwlWy47j1mHW9SvRXLGId8lGIy2NCJQnAMboLtC74pILwfFup59tbkMK+FZOCLmteHQ==","shasum":"18ae0224ccc1b35eeb35cda1f6f5a9219100baaf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejndwCRA9TVsSAnZWagAAsEcP/0v/HW44hQ5fPt+F0oVe\ntpsb7T0vZ25PrixcnrM8bF80LFs8ioiXSmvEraQ2wslNcq23C1BOrAxRtvWH\nvynaEFjFCM+Q9d82MDxcR/crXLR6i7d6d58RwZbKyd73FgZBeP6tCAFDZQm7\n1sx8PWVNU9RWKJLrrwfQqT3kqF8KM2YOHX20Q/PUlJTfZRB6L1r0QAqh+535\nYGpiE3urmlcq3tAU7yUDOsBUWfnXDt321ndrJaRGLF8dsR9HRzIl/ChAtZY8\noonhK80f4tSxcuStbcVgKlODXgR+kjXN/xC+N9QeA6P9FgFZ04V3/bbqtW3I\nZnIZMDYPqgSKvwiStJUT8Ib/Mhyg3/THiVrW2fIhcJq4MUftqY1wYqfw8/z6\nZ6m9pmqjjZDHsL908RqL68dZUA7mjmQCs26H/bzVlit+HfTyVBHHetWSE+Fu\nHh5BopZZAJ5rViCVc3luhJT0+bII2/49mbde/lt6+/Lgc5ST3SIYXqMhHB6Z\nsbPUURQOwwgQxFg2cKXWbbzaAFbVHEYPKJDVngzNsl78c9Qh1GSAiDYuyFA9\nbLkpeYYm5H9hMJeX2ZmeJordoi4TFa+OxIU4ZJqZq1iOklcvt7pgs7jNv6cU\n3Ac1iUPMLzTFI11FluB7AzuYB/h46d0k8HNb4jLRc/LSMgcln6SGL+NFz0fa\nhzij\r\n=Y+Al\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFFwwbMbgAumPU1cwmvkYmtXgbTRc8akBZ14t6OVlrWgIhAMKWibJgKkwDilOZOZjc5vne0oHOPfMTKwZt9D+9HvKk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.447e31c6.0_1586394991749_0.7798586427729519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-button","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-icon":"0.15.0-canary.d6dd84f7.0","@material/mwc-ripple":"0.15.0-canary.d6dd84f7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-XhkEYIwKbL5DIshkQ1VA5QQrCx7VmP/WeVXSO7TS2QenbJ6GVEDCYzfqVYmvXOBXYmr7rWd7efRxdg8xylBC7Q==","shasum":"d66626acb403095a88d2e16821cf3493c20598ae","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnl2CRA9TVsSAnZWagAAglEP/0LYhqII2+fGvWUk2hVp\n595awseGdIrHZlxwKJps3kIFVUYx3PGAfMRDxz8TxvAxz7tYyhy7NbA4PLE0\nD3jbIJUpVcmYPwmIdtzpa0uPI9MrjasQFroPvffJoGc7lYNK2N0/QHQaE0K9\nirKunckzysitNSYlZkujKCdqWlQ/q2VSQAuF2fDwH8O1cQGafWBGaqGW9vax\nP+1nGhq+dIB8I5SBVjTJzYH1xX3UHgSrBDFQKYoYf1FbntngsCu44VYwaRSx\nu+UDxZUvByTCJFSpxWC3A+eacOcrRy96Him+tHAPVP0PxFTYoUAGKS/CYfaP\nWbR22oiRUqLLzPeit3Tgj9dnPW0Urics6Ku3hwMtf4KcSYsYxhumGHzfoknQ\ns74IapRWxJVzpjUPKpR1JrhjoHswVZ6qiuI6QEvysqbM92eOP0Z48ma99zg5\nFCEybPk2byRq4wuujpDsbknjJ+PJOGpWIYVPUzYwSwE1zpngywXVEyJEy9QL\nqcvBVfY359YbzjtoG3droSfS5n5bqkMFg16RfSZF7u7Nwh/wOL2QkBS05oJa\n2JioTc7ro1v8V+ZMUMZrnNBg4RsVUJjQlkK2/QAVgEya7k4c2UmXiNNjR2/Z\n+80aDieVCEU7ar8lVPI7RdeVShO89auNCn6XZDBWCctWyYaAjvMSL5+d0NQY\nUhLF\r\n=E3c/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjDHmf5y1dqeT5Nxynp6Cz49fRLSmBQxQWOOqZh9XIWQIgXUxPDFLYtzDEI7Ziiw8aYTx1jqfi+12sAQTCxnXWmvY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.d6dd84f7.0_1586395509747_0.8702976988960047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-button","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-icon":"0.15.0-canary.9b03ee68.0","@material/mwc-ripple":"0.15.0-canary.9b03ee68.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-h910Jc+wyorm5vBGSSZxDEfaC2f4jw5ZaHPps5tWEntIVJXqT2gzqgRxjl6LjuATfSbwtcZSiayAgEGsrx3A2g==","shasum":"2616b378f05750ebd77e9c46473011ca8e0dfc89","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej39rCRA9TVsSAnZWagAAB4UP/RxpIfga0+DSj9V8KGF3\nfgJCvbshapK+HloLvjDpNFcz49CvCJVR2quWOBgp9HJp2EUQaWnsKUTHHkLu\nGWgTA4JO6Vw8PAzhgjEqYRrVhpijKKS5PNaMp9I8RbfWfjzHJlVnRF+pucOX\npf+1pQOho5ejX0J62FwooSKuYbb0PDi3HkQuOIehatoLQByMeVGAxE1exECS\nUKzQIipXSGfozbUTHOAz1mUf5RgpHUMq9XGNaoVkjdox6tQMQwBSImMpM87e\nw/IUw+4Oko6OMC2uhPbSJfYnJ4OqizX3FsAuZFk20diqnVsy9f3lWpsK42fw\neIASIeUqGpy/sY9evNQx78hYFpwHbiHDoV5v0JbsLAE7He409i+fOME8atre\n+sagcKKEq8Q8WVEPckdZjUBBVOdAuOdHCEeDs0rweKBui9Z9TSKJ91KZh9di\neVsoWqg550ZyyxjZUl3QGJmgvHA5czrdc2sqWPCMInflZTIZ3ZBcmNdIl6vR\nYvoUqbuVm4X4dSdkf2jScBKFfl7UTgbSe64hL/WLunfFgTeZA3zRrSRzuGvW\nvGDWbblapCBK8CgM5gHgEP8hTT0Hgk6qXs5B8amH7x700A/QCyrxIJ+Ubx1g\n0kF2sjaso56kU/+tFLmrWlZ6Urf+f2bAXm6AUj83IcgxEJoUrv52v6X7dbO2\nwWsg\r\n=qiXa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSLZYsv69sKypp6rz5BEtusgnXQfuqA9O6Lqez8yLK7wIgPgOT4zXaiwIzXNXo2coz/Ap7mZ7QQHH5wgZ6q+WkihI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.9b03ee68.0_1586462571510_0.7747592866789141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-button","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.05f5e1583.0","@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-icon":"0.15.0-canary.bbc25b10.0","@material/mwc-ripple":"0.15.0-canary.bbc25b10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-a3wilfszD33/uOdIAMwUnuMUQiTlElsBvyVOtW/JCwMytO4lgXJn0c92NGBn/fA2Y2feVaBeCrt3wHB7wXHJrw==","shasum":"62bf7ee8b9d6d46c11c82f341be0cccd73f8e24d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcQCRA9TVsSAnZWagAAh1MQAKJkxh1lDMvplRgCIWve\nmiWal/qUmxvUQZeJXr6k0Mj+hGAtySViMl7tPsA32mmf7CMblTBrmVqI1DRd\nZoWw57Katqe839iwfk/f8suIRzfHdiwT3hRZsxVfeTQeuAn7P/CuNCLw01dO\nrUnETST/EjcTCsua9yGHGxKwLcC0GKMW+iYKWSOdxYyIyfKmGnl26XJCDmUK\ng6BsAoCpmC9mR8mwSo97uignO/QNuW1iNtgwyp4505pQRetYOKWtIx17tNab\nTPNWFwXfs+N0EfNrAgebeJU4IaZtpaU6k4WUn1u6G2aMUQclcTCp/lLHtk69\nAhMY9DUI2DVUOSRT0uj9K7nAtgdeaZuxvkBHMbVpcapkA46Og8cos3+V776Y\nPS0EU7MLEWYA6lUXAsxho+fy6F8BoPIAUmEWJOcVYKKXOOYwi7Q0HzDkB/d7\nBObArVte5xRmDBsFBZBYv52vaN/AxW/V+FhFTo7zo3RjyR/Ub31yqUdDsXux\nuGZCTacHIdWjTjOljs68UZzmEG+lI+RGCNZr1HBTdQ55ooZHPe0OmmIC7O/D\nUMh9xO5xMlxeFMyY4TC5F30mFzrVy84o9FlSz+pqhsHyUgoP1dDk2Bub+d0p\n98o41UWSmmF/Ta9x2S075A+rWpEpRtS7k35e4jefcFS+Y23jRuPxa6H/ahZt\n/QTg\r\n=Ym48\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEliw7F4ACEPAExoqR81gZNVbWE/f1EYDAgokLDhxz7QIhALBrjH3NeOisUNQ5yqbreiUYR9uFg1XHTKq6fKQB6rUL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.bbc25b10.0_1586558735955_0.4396637245620527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-button","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.f172b0f90.0","@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-icon":"0.15.0-canary.339cbfd4.0","@material/mwc-ripple":"0.15.0-canary.339cbfd4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-eIivMQ+dzDE00bQaC4MRe/gklyRcugIlrBYG34p7LpqlzPsa0pMtZGZ01JlPJT0Z4omlkTsQ2vRO5YcvrLBxSQ==","shasum":"258ef61418fe36584ed61153e4cd5219bda78e1e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0ajCRA9TVsSAnZWagAAM0MP/isPjVMxmnZ/irTxgcr+\n3hInUh5thB/JHnj9+bMUJQyQjNXHYzKVqs2e3bHzOwNJDNIqPmnhffKvrFTw\nXi+eQ0TvHtHWG4YbiCqGj1Wls80R3FwROSBv7Wp9uJDNu1L7MHN1f8CuXjmT\n74VtVTRTjRrKstWYPZCVuIKnDIKHw1rK6296YhjIIdgwaO2JhL8W97lHntgB\no9OXIRwpG63/6zm+wa9+IqqWR1vcZna0laJbd7oMQJHxYXGW4UbuksPMxZgr\nf37F6bglowdlZAP6CYFBUVN4/ldfXMlHraX/UfACkljaNpt4kUx9TsWZV/B9\nwOCnZdMzK76vZBVnwXWCoQAanb63Ckk+29018yK5B8PUslYVeseldlTHNGzi\nMqVdD62J94XN2cHE2CGtqGdGZuxSJWmLypY3LSRfmvSismZeP+z9o5LYars9\nmEqgIOHLWiy9gVKBuSx9bE5DAWeRQ8TWGA9ucOQ6VUvS1ISXgwdo0tEJ5XM6\ndNN5R15vskqciyvHJZ8c/dpu/RiFY4ZFOdqY48LHCjgIW1/k/5TdWKyhNlVv\nhWuDW4lb2N7C60QoFVC97pOFBp31Az2hPidy2/eeqh4vrozWZXYsxJ1fw3ug\npd/RXN2BxDnhPNm9oVqiMifG4s0swAJxXw0OrneDlRDRH65b92buupSqt72J\nQ1Cp\r\n=gWhQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErWIDitc2USWaKycJa6c9Ps7DgtYIwPsz4KRa1SMEiNAiAsvBrwtw/a1UZqNxiLknKZjKBvesFGxzL+kQn1xbmbLg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.339cbfd4.0_1586972322697_0.7344930402623888"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-button","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-icon":"0.15.0-canary.b74ff19f.0","@material/mwc-ripple":"0.15.0-canary.b74ff19f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-H33IFjS3CLSCunBIP0KUYx/01pR1WU3RSGUQxJWiUKGQ7FOqeLbkbZgXOdVMHWED91xe433P+K3Gl4FhMfrsxA==","shasum":"de9a65d2bb99f7eaef366f4a54a6dbbec6b775e1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jACRA9TVsSAnZWagAAFEQP/j0b5eUQNHc4zOX9QrGm\no0VKl1wv2+2ihGHhhbNYM+6TvrMdfogX95ueZ79MpoNy39rSyxNhbdVB+/qh\nWf1g5xIJ9N/FmF8c5UsPcNCo/2s0jVKM4b+G3Vw6MmzkQfRsI4/4ltgnT792\nspkYJWU/Nba3dgI/ki+cmt5nk9EXWcu2ifDnAWMSSzuhlCJmm6Cf6i6xlB/Y\nwg/9zFQf2IdGl0P/ILwZs10ESep9yPKKQckiyZSvbhlG2iCV1cNheB/WMyuG\nXUr0uJqP3FVDpA8KFun1o0b4mkkGMojdwbFXH0HA5cppHuLWbt+7s72s8Ojk\npyWaFCQD5ik8Gz7bKO8/M5AMIDltzig/rHeC94PTS+L1+Ld82yvq875cHtLO\nsTiK0CpMynxSptJHFBOyAbDxLa6tehwFygSs4eWuhCga9d9tglAa5KHeAg0e\nbbBTmvPQs1MdPYn98pnGRo12Z+P9Q5wcQQ8C13vH4L1+TWMdL0Con5MBpl+8\nFLmGZvqhRowaIHrsyMC18rM/ZhDWji6u3QaMmqtTv/MGEyNQJvQONzKsNWK1\n1Jgk6sY+Yxt4fytUiIOAeUC7rQphbreAf+vqTIkq/zWTfQ9uMnbrpUmKDDSO\nG4eewPXIyR/siQae4AIqi4tSJ8Qdo5p80nlM6OG73+WUy8OCuY2RrB2lqTy7\nyW/r\r\n=/h5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDILthwbgYg+1VQuZp33JVIGIO4yzAFoG5Z3tY5Xe1W9gIgU9HaDpsX9XVw4vYx7YlqsTvvj++JQGojAG5CZloO1yQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.b74ff19f.0_1586981056147_0.8732631540221238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-button","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c02642273.0","@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-icon":"0.15.0-canary.aaa16853.0","@material/mwc-ripple":"0.15.0-canary.aaa16853.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y7JSOQ9H8AIGjadEhEQ2Pr64PuIQPjXOntXRfLE83N1kcLh1OYU/W2RTJVDf2f/v+DSuKgBBXgoYu++FvWGkyw==","shasum":"1ddb9867788ac010496e815824925461c33f93c7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":77802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel41+CRA9TVsSAnZWagAA6GkP/iFx6GSlJXxNBXIZbpab\nP14ekZ0gjJfnzUu/99obj3wS0oys0BwomS0CKdzgD50qEznYR+SlF5XH3VMM\nfDVyx6RmcrSC9/J1YowUTHBeZorzWeU2RVZnvvYt4oNBA+E2JHQJPK/YU28C\npCdb70wgmsU8/jHfgPYt30Y7RpSxJVH99GOjj/asblfOKGAqv65m/yqyQ0hW\nq7oOfaccFCDMcZKs1jDiavX6LGMAMz4YNP5E6jdm0AVi+sPjdykzXSgfP8HY\n4Y6BGmQNW9QOrZkg+A17LW+jIksgU1J45Az2I2FqoM0Kl8VG4ABdlfto6B8L\nLj1xZBK94Qx3ywUu/GmstJYmgzXezAufsfR96zNERuoP1y7A+fmyvv9ce8Ce\nOA7xE//OE927uhoV9qp+dbJoRALsq4cLmSTf0UhgR43GXI+vgp/U5HNkWIuA\nWyd4hzVueuvIPDuu3JvjRrS13WaV4TuHkF0Whstq3W50MkWNdibY5Q41YHgS\nW8YjG2qAsGrxv484UUuQmhrC2fr6A7dSZFn4paaBD2JeYYV/+ke5clQPNWKA\nX2L+7zm9survR4HUB6g31kdCo8THVwQh5pS1p5Cg0i1ISXR3zrPGv9Pi5yri\nQfPJQyrXeZJL8M+zC7HDyaGELTpS4l3fkTRazykr8r6LU2paGoLcZyg5fixn\n9XrD\r\n=wQAM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3K9NVqMkxlMfeWBW2cUPh7M+5xsuOsCB0EXdusvva5wIgb2Yzi7pv1saWWwdKQwg5JFLxsoQj610yPNvT9Gs2E/o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.aaa16853.0_1586990461567_0.02957542321636608"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-button","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-icon":"0.15.0-canary.826b23e7.0","@material/mwc-ripple":"0.15.0-canary.826b23e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2pST1OAjDOeTjbmFcJ6cNzs4OQDSQU936TYkiM6Am40aQlA9BZsk6yDQyWo5a1n/sQPdScdOy7mbhmevA+Ac4g==","shasum":"48bd27a5f7d1c7e2e2220584f8ffe2303e1dcdee","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKp/CRA9TVsSAnZWagAABfoP/3/kvyvCHfXtNryMtiX6\nAHyfnhuvvILjTM2HMc3p/9Cn1W4JNvpJK8ixIMn9eCysJDZbtv88JxYasy5p\nxMFRk7bYLPivKj3Z3PkPhLJ9SL3T/jyI+mVjnfufjsa0KaouBJjqrkdzugCy\nneYHYZTO2eVphjQnzPE1LizrzO77Kv1U/IQQEi+SSQoFH0wXWHXy0mUowyyq\nwkv1dubCLg0DzlROoTZdc5HHtdAIpdprgzE1F5YSa33bZQ5fOSV9zSDfS53s\nqTwf4e6J4HjavcHL7uNG+c3qSjiomxJR8WUEbSBzQn6o2Pc2HJu7uipNH8l1\nOVWD35FcyU9W91Ua/ZdL1P4yFa6pPQT0x6Ghey3THr/8Qv/MosYfk8trnZ2T\n4uDswQ+9QMVggsPSp2Acmne2J0b/3z8BgotCfM9rBxv0b5nyX7YmQxJQyXol\nZdoZO0gr4rU6Iby7qt3hSHNoU8uUOMMcqHN0LmxppMAJaLQL+su/z9cUZiAv\nEnqIZrPJ9gz2Qk403lH1s35HJSxpnm8HS8T2inpzVfjSIy/Q0tIgvLOdqFNd\nAOUB0YSjwCHGFtgxVvi/3Uu3pJi0chwyIFZ2ke66Xhgn9rx8SF/J4H4qB3oY\nt9gBmH3mAQCRzI2Ynw2yogwMuhxRkB2KbQGuIrS05quas36ckv/4bWkKGu7k\n9hWj\r\n=1vm7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbU7Agd+R1v2T9AEmXnTjg4L1vE0+j6kO2uvTMr7YP6AiEAl4H7O/PbaBaDTIZPbmZBUSoy0R2bAQ/PKt1xdCFVfD4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.826b23e7.0_1587063422664_0.31761625831821005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-button","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-icon":"0.15.0-canary.e1ad2b2f.0","@material/mwc-ripple":"0.15.0-canary.e1ad2b2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-w/mWOQEiSPwQ7U0pnZWz4XsNas2nztFTOoB9oDsqdvzqdfRWeCDCyNPyELV5M2b2/R49AHuwHPw80iUco4b//g==","shasum":"466d952b334b15533c0e0345195b2bfee4dab438","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVJCRA9TVsSAnZWagAAITAP+wROg1XQXjYAkvp4iLA0\nfFKANBQ+9NKYq+8KtYT02gbdy8BakFT8a8yWooPM+hm+WDv2LtgJkcJY6exw\neMnJAC3Qsd5HidFhEdFgAxdQTC/7UVZY60aFfoSECT+G1KR5P/98k0gpjjwm\ncl+/IBL7Qtx3eCpoFGN7wnRkV5nevtGc+ne8a9/iIvmyEfLQM2pMi2ktsKEQ\nZLrY8OIGhtX2B83XttieBVqmM/mUsoyVaWAOwSWsVG2IuN9uJCVCqHO12IIY\n8tZTGNx08lz8TSdrgGZ8Ood1vkJqLayY2oYlfIj1vIhNzhn7rzTyWedyqH4+\nrmsMAlKEDnaLl2s8AALjYRavdd+D2I4IpJupAVOgmVG+ocyVItF3S8apIKxW\nBNB+eOH+poncDx+2famwQEiUda/GhViTizK5w6f4w1mwu+vKJNq3BYrsuGHX\nHPNGCXA0+alRCV9JDmCM/wOUzjyEVSR+B4Ck7lcFsBkt9k+CYqV/DPDeBm3Q\nq8qJ0gEzVqHCzpx+EoBrGpBDHjtUG+6VFCMan854hWkyjouZXz0WE7ymr74j\n20A+zdUQuJqXWI92TKKu6rdnC+wSAz21tU0HsS17GoM5owbkj9g/aZo70o9C\nSx2rZkBWDZSgr4usyqbnBvSsiVF+lzncxCeQw3NlvPTNHtso3wKvGDEZIuxy\nKgBS\r\n=yd0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDx5IVtrbATPnRF76NSDT3QkwAYt6wr0jZpNVMFXsdOzQIgBVNR6xFSp6TnHSdT3XdQnhfZuV2EmqSSyvGFF6xUObg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.e1ad2b2f.0_1587164489234_0.35038904438576135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-button","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-icon":"0.15.0-canary.bade5580.0","@material/mwc-ripple":"0.15.0-canary.bade5580.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FGkhA23yGMPJdUELFCwo2ZS/rCuCsw0fZ4OkSzp9Y+W53UYz6K3F+5AVuLJoy6LZzv+X4wQNFp8WQBmOLeLSpQ==","shasum":"41f744f7704c8eeebbcf72d0c2e2a0734c04a0a3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjl1CRA9TVsSAnZWagAApUgQAJLbPcsrzi1fpIm6eDuE\nz4SaFrV+mPescBHqE1y5DodmgeaDvXrvNCsWbj2XXZ4nsyMw85n5605pRI9v\n7Ya1IQ7kXcEkD5VpZXbtfrPctS3JaXBKexPkCcHiPQclSYWIxgGgKLV7OHSh\nR7j30dL5jeRq7jT9mMgqah6hO6Q271xpnPvrWIxQuqH55I47cwGRELshoV/3\nMhVUKUa8h1CCKTzKSz71Sy3EZqXajmlBU0RYlX5HD6yhfPeIVRDKWlkR1UqR\nNmdxVrxX1D0RgPdDgv2UIGX/blvMHr8lnyUxvOjkzRf9+zYrGBCGSgcnc/qR\nrhsi5f6Ha44w5s7IXrnyeDN6oDGdhFn0KUdwSMk/++xweL/qy+30Pu4KxtAu\nV29m1HfxT8VSWGCDnuWnzrXkYBcZHDvRzBa7z8qUBvFlDS9q4kyb2uNj3CF2\nQz3DFFZ7vwU2YdcpyEuB6AeyB0pla9NK27EtuRKzIBvNMv8BvQ1epxYMa8x6\nvzeXgUEpQVtVyuh91hAgdqNqxvZ1zV4gaBUBPvarjVlVIg4XpjyN+Jr5iSqr\nlGV3/3dvkahEzRG1HbBSS3mVHGUh5NRVoVgytaASpnuPtgfGwcTrMVzPXcVY\n9iRSVywRERZTylM0Zy1gl1xQZsCvrFCwIULVkY4jazUNS4OplqU+IJjIxJzA\nUwZJ\r\n=kn7X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIB5V5prkEgE1UK110FqBCQ9nVLfX9oib3VTrlgRMXDQIhALqYrG+pM0ihzgTdyFSmGuiOE9oZAO6Yxm5HmeITkaYL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.bade5580.0_1587165557435_0.8292314443504623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-button","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.ce6cb7024.0","@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-icon":"0.15.0-canary.dae38247.0","@material/mwc-ripple":"0.15.0-canary.dae38247.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YcmhDQJqZpFmcenKOhUc/nxf4zHPiLOUSWTGa2pogYbEaBNSc+WeVoWZQt69w50jSnN68zjasy2N4lJACC9Dlg==","shasum":"401d912b91c67fbe15e497cdab2c7633e8d01179","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbMCRA9TVsSAnZWagAAKTgP/As9ZwZPTkgRTsr221YM\nSiO2t9WlHLkqSSdBFB9Z2zYarU8T9fn1ki2mJ+DUm/z5ntDdy5HgjNugjEMt\nZlt9Dno6ALnH8etlJIBhIaATRF2zWt0SPrNvWAiAis7OdVREZ996pcVAsePS\n4p6K5fsAXA4zXvUuk+LlR+ohn6XAde9fUPLLaeQ+HIkTpRP0GIe2CCtfEJkP\njfdiDLaNPOiSSuGIdZX7MtIbtWbhKqxcqz6zzmULzNNstAApGejoNXLYW5a3\nwLZ4AAXs/X5GSRmYEwhuV6EU0FnZlzdOtUHYkKNqoR1EcEBvBNT2h03/r5In\naTGpuyGLQr28ht1cMJI3UrxsWEccajFnHm8IR6nFHKb9YHm+3CwhSbLcpkit\nHt87b5tDFU0rH4NG2hJrzUQsRmCt/AKS45qMrrO5Cm3avWB8pjIvpr9ppry6\nKGJmlQbAiRhTrU8IMjmRkcn/DhmErSpOQz+89DP1VlH5kuKvMIWHttHHxEYb\nA72jbT/PqkolVowo1+5nYJ255U5G+E/rGyIe04OXTKDiooWYX2LKU6jdGwEv\nzrMeEhqm0/CZoLUhfHCUAe7z320bvvdodWRg+vau0LyBuiAvoDa3NKOYhP0i\nLgvmStUSk2uWi8LrTRhXaQRKvV7BYAFqyvojWaT1JJOdU+p9Uac6okBmsdFu\nG1VX\r\n=lzse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDlh4xw6mlxtkOTlQUmj8AHeSTTWOjlJjY3NOntCTRmAiAyjgKz2xTWwIFmM+uDYaBfPaFS7txNMhXNcu7brWU4Xw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.dae38247.0_1587168971819_0.47979435851455654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-button","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-icon":"0.15.0-canary.a04c0b82.0","@material/mwc-ripple":"0.15.0-canary.a04c0b82.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EdEKzQR6ouBrDhmJEu5xBB1XRqYeyIXMGAZngH5J4/eHJ04aF/ulOrpBzwmEsYVYjIu1XlN+GgrJqs5FaIzV/Q==","shasum":"58720e62a6e9254f91c20b174b8e562bfae19eb5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksLCRA9TVsSAnZWagAAw0sP/0vQchXH3K3nx0VAPida\nSWNgK4LbJMWyigZ/ZiUisb3QcncQtAOkJpimg7PN/U1M7mXffaIcq4NTg58f\ni/szo+uy1IbJSV0XmLd41ybBdsd0Wx6GH04sAGVuammF2nlfdEJfci1RJEoR\n1JdjUPCco7GRxDaSOs2M0kwuvUlDzRMIlhc7on6C3cJc03VEVJCziS2WALzR\nx9uTOL0HMqG6HnY5FB0ksR2G9+CklAOirMuIBCvdHWrZcde+Xj5IpPdSYLSy\nsGQs0/jgizvylOd8/93uRxsfPSEksKQle1T7RuxJx/KmeVNwbYpjU/osweWL\n48xzN3Sb75vDX019nYUh5TIzOZ/ZVjRF9EXc8wbEpZaj14tz/P5gUEQFaA6l\nKjYwlQEyUhKzc/3l040y1jZ38D5IBMVtIyduwPUsGBiTgrHfJIt4Kjm5QcHu\ndVYrTKsAT+Qhyvy22gdM5uvdvTnV6i4i0jShJz2ZIWbNDgqJO20aqhX8wD4N\nPgA0BEIlniDEoRMattEkc8lE/rUK+jz5z/KzPixDbsw+CFXR5ycVaIGw59wt\n7z3vmOagMEPacLpNDUSaJDVdkOutL/++Av+kakYN8y1TCTxr9qiyvY5un3cu\nhhZ6lymESfz0dPB0r3wv2bLBKGUKIsMtCxGT87F90fFhN5I7k/kRTOtiD7cp\nZZUQ\r\n=JhO/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJpiF/MbvfvFThKdDSPPn5bRXorV2j2t4NxDOVDOE44AIhALtAxjB9RsnRLcVGlVpcX5vqAq8fCKmGY0QIemqwwbI7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.a04c0b82.0_1587170058783_0.9297260352225751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-button","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-icon":"0.15.0-canary.715decfe.0","@material/mwc-ripple":"0.15.0-canary.715decfe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1JzHbZfGd99WDQ3AMcYPvNnl+TA0fq7hQl7XgPO/DnA9rKEWLEqdSaBxW74wY7S2+ZvihH+ixJrSzhgvCIAeBA==","shasum":"fd61329464e37d56ae1bb49d0985f09160d1ea4b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenetlCRA9TVsSAnZWagAA5KkP/2dVDhskn8mRPES4Fft1\na4pbDsk4XsgfIBvthg6q0eRRFgARV/sVkkZGoi6oHtSW7r+GPeiwC/R8MVSX\nyEhzO6joSTTzB3k+9HTpeg9sGgjnlRz2ItTCheeJrbc2vrrV07hVP9PTUhck\np3Z1m4Bg7GbsQSDjcbutciHm83l60gyqFOsV/rwY7fP4iKptSsGtUN/AdoTa\nuukxXCdX5WQQW6iCB60duJ0YocjY67XJ4W6k1y8nv3CrWL33OTo/Ob5djIoe\nvoocB+WobN10KxOyPmQAOp+IUO3FhU644NzDh0bVk8RvsSOQW8LH7gEwAp/r\nHY34q+I0f21pVHV1gXjBIXOlU/HA2eHMGpJEUkNXEBxVGP8TBz1Ksfvjj98Y\n8tBJOOHTdB9UTSS5h6gZEV0cMI/n84beZdd7m4mjJJGc4v87D72v7cBtPYae\n+r5Y17UqFZIKLAkEFk19SMLh/eDeQCcPZgkgnM7j1TGdqk8EeLSn9gwzuzvt\n4zrKUxoNgs72M1U+70Te+Dl1ixsNhq9U1L5AHsXixLkQ9MS2/65A8cmbUzfm\ntNlBjvsH5s2k8k3UKKZccNJ3gnfHLK9++/BTMcPL9naKJBFcUMlf50GILAOD\n6TBeJP+HefgPZdVPUnZjvm7maD6mq1nnG6A1zBDw5/Iq8uhyrkKshuXIrU8P\nD0hg\r\n=/XDU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9k8EIZ7Q28Hv8GSie1gDWT73ND6yNACCNG+O6Qm9JaAIhAIqJZ/V4WFxTuk3iTR02507oDAdE3KcurwFnqlXqMKA7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.715decfe.0_1587407717472_0.8075377752500419"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-button","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-icon":"0.15.0-canary.c862cd04.0","@material/mwc-ripple":"0.15.0-canary.c862cd04.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TpWevu1v8wFCNyXN9k+XSZj9ldngnATLhMcS15nBUwXqZo4a9bSB6ubI6F2swwRpvWUsuECeq12GJjcKuZ22ZQ==","shasum":"a259458640c624e1e49ec8061b0363f6e1b3997b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":78036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVOCRA9TVsSAnZWagAAgaoP/0yosdhGJDW6cAw+tT6R\nA+LiGprptcXnMkWGDR8+f102LVi3TLbbPK34YO7H4gzsrCz1qdH1ib0W1hDZ\nqhBfqLlHbDEDGBNeR2cvvQvDrFbjvJYG8xjeOiEpvx7EsxyR8qhdE2kUKlg7\nx/1BgvxZjmk2m6svDHWLh28g/noGcMARIrGUwzI+CW/YTvjoksjtbF6JPMbD\nxF1fCCBtd9tKZZO+W1o144XM4OWvA/XN3QEuYZ8BaHLbZaRtYUOKzpUDH51I\noON2NgwvrSF74CDjWcHpf2sdRo1FlcWveCoE3ikMNpilHBPDG97o2N4d9//r\n8RuOKCS2WKNLWuKFsIzjzaXT+F+/RBYBcOIHrVHi/k5J4SSyw+GWqku0KZrJ\nucz16aqVAK7UWkirRfrcTmeKtYDAd/EaNcKP6HYLtumUjYAKrz7p/wqzNmth\nFdLSU0+3JXM05ETHewDpGcnt/iy0TbTTSKBP/lSjqbYEJMT96nySd9Q7oJD3\nRAbvVeQ4QuaaMkz3KneDZ1UY5o4tcKMU/8bFcCWM0zxavaAM/siG7EzeHQGm\n44vrQrOp5GjZTQYA1+A5lb5jDRgmxRQuhenQbtAMVno7aazH4I/4Z9aJ20a3\nE7nJq48ORxZc1bcf7oYYXXtMUOmp5xnFDnX64bMzWRAyQRd6IHhJsrUIiw6a\npU3N\r\n=2cnb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB66FWjT0jFraGG2U4xyNVgm7qpx5ozmnPztOuwCQ8WnAiAZHofk61BM94cin5IC8i49srhyBh6dkHZZDeq19X+SZw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.c862cd04.0_1587418446396_0.9868438742051424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-button","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c4b4bba96.0","@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-icon":"0.15.0-canary.e9b01b35.0","@material/mwc-ripple":"0.15.0-canary.e9b01b35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WfP/blOsgTTLzktYAhDzjpk1YbDZH8QP4/JkAbokBuwNBsk0TbOgGL11eAx1KVyBoaIhCl18z/hGldVQ5QzXlg==","shasum":"544c1a8321e66689fd33bd501fcf9da75957b48f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":78041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBWCRA9TVsSAnZWagAAqQ8QAJ3sK7k3nx87jJksHJEO\nYdSjFHUaRRT4XwT2qgLAHfv9hHljQpEyp3fgHc0VBkKJHr6c0g63611TXt8t\n7c5iSZssTU0h/kNjo3iBut4+hAPcEMdx8hURKdqsgWUh5B3jPDO4YefBWgfZ\n4jZuPFQsnRckQESALhtu/iQRN095NioxxbvVw7DRHgNWkP4Gh3/iFrK4SMpf\nVz34nP9NXNPhOour4YpZ+iTLwikGt07mD5TvXmpzgbKnF9cpiJPY33Wo2d2q\nIUXKYWXMX6sZ6L5oIgyPpRmp//T4DkJZQBnNRU1XPGes1rQ5lZEBqCaUMjuZ\nCyLV5ptILtfY7Hm+54XaMotIjSJcKAGBofFhoD3SzP5iS1nRRIXlMLu4KVrl\n2WuHNdTkdnjQPR63qsiARGQWh/u+V2Oq6oun8DsWYdIrPuQb0hP05PO8p5Gh\ncTt0gNs9W9cOriALdPvhXtFU/IQjlYHPWIeqh8FIYaM4wZoNaAWJzy4MHrAw\noI3UJMI8qYI7pGBOoD6BXX0/SRX1Rd3N3RuH9UJHRPB4x9GluhGoW03PLnwJ\ncwKB1ptuvHNhtoFTPRmIpxPsEZwMZIQkf2FOH1XZ9PepGgv9kWsmUKbR+RDQ\nXP7GYSPGiCs1BvUDRi/jxshXDcoc6lDBzP7pzSINpSAjql4DGuTXPVw/Mg0h\nauGA\r\n=TjJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI4VBsmSKomWSqHuHBos1wc1sgU1IG87D75ssO+vExYAIhAI/kb+TibymNHJh4LA6+Gge01AdneyhBOPJ3Zirznrv6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.e9b01b35.0_1587425365695_0.42330639843527007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-button","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.7b4482402.0","@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-icon":"0.15.0-canary.ee7e8989.0","@material/mwc-ripple":"0.15.0-canary.ee7e8989.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2tLMYhyY5hBFFGh/SzWKLPO9IWDkBWZIxnTCkvi2QXZhHfKZ8TWwLyIUi/0SwNV4BxHQ7TM+yRBg3JPZ2qpppw==","shasum":"ae95d4b5bb362e5a76581e4656e3e03660fe5a1c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":78041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOGCRA9TVsSAnZWagAAnVIP/0ve0KwentQjiCCBfCYk\n1LVzKttDY+jmk0lUhCvxu+XRkGx9W2/+dMT6FFQa2y2ePdygDDLBpILPnR84\nVA7QgvO2sL6jaFlcCjtf9arKRV5HiUZv5Kngpnl7SeotBlMEQtYKV74eYBZ+\n5/YFDGhLyDNscS7kFViRO5gqgYso9s21ItKHbs4Iee5bDlM/SGN4HigQVnHP\ndm2VR2XkyTIdeT0395GGC17hrUMTv7DlJFIWSe/pyTGopPjnwNspDiygrl1h\nitQ9heBM0Aws5qbG6BCkpWquHwm5J/Frq9J1Q2Had2sTYBtQjsufHnt9mpu1\n7Eg220zb9TwYvQcrKQQs1S7nXhXMEvc+ocVqbmDuiq1RNtWUNn1VdwFFRW+h\npS+MZBZm7O4h8WG5YO3q8fv+Nyq9+72XTgeTLM5ZqsBS2bMJQQDg7OciboJv\nJiSdM3tlol83ucgzpsvutrvvnI5U5OXYQIE6FjrZYAOOksAxbdt8E10VFQje\nvm3W0HeZYJhiadf+oLWFfcFk+e/93N7aHMkmz9semlzdz9IMrVbcupYNwgZX\nskcMtxTk858nMdpRlxsMMqO2pe/OK0Q0ZLGcDsjHdJ86CJaOOOo8glAb2tZ9\nbj1hhKN1Ci13+W3UgZT5g8NpFvVZrpeHb76LbFUPo9S2jx/Tt6BYvnAJjfV1\ngvkt\r\n=GhtG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+k39wRkzC/swYi1HneSPokenDQa+kwbKWXntfTcAgLAiEA1R2qmBCpkEWcHO+bZAjicw5r9YD71rTsdHCn1w+HAOg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.ee7e8989.0_1587430278050_0.30339417237104227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-button","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.deda86d8c.0","@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-icon":"0.15.0-canary.9bf47ffa.0","@material/mwc-ripple":"0.15.0-canary.9bf47ffa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Adc1aDJhyfmcetXXKsn/+51mF3pi95SSeAHzr/quyfeyqfbhccP6FEDilx/kt04LrhK1MUs54jZgvOyXIjTJ5A==","shasum":"0d79a7f1170a5c01f67642e521459eb8006773c6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":78041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2CCRA9TVsSAnZWagAAZngP/13hoW1VITwmQOHMDGKe\nZfgJbJ+KxeU/VfK6yMPNGLVK9JzPqwrjPKgOSRb9/PqJKmym53hcBWTTkQOT\nrUcKWDcGQ/7qt5CmAtQYwrOprVTv13z0XE1kc6JQH7pbU1fL8Gqime/qwrRf\nYNqUwb7yrbyAOEnil0xpgkzKZ0AvD8X7SH1F4FrJOF1pC559tpPmLB20Id5n\n29BemzWRMLk2imUhKLg00eHTnCX/7gfI2cl8f9Bg23Ao1i/CVBgyVrqrHta6\ndoAlevY8mfK0Oy7MuYBRuUNRjY5g1jcBJuhpW8zt0k4gdyrsGFhf7tz5flwV\nvMXpKHGBE/5PUKNmfdRWRFM0hkS8vdYBXsf5t/86ts63byQj+VUspia3F+D5\nqvL2qqdcl/x925PRCjx8ZDq/7bp1mdIB9etSSHIWW48JvUkB+KRC86OzAv16\nWRN7unlHN68mWUZV9+Pfm/g63vTJPUtiMr3i9DnpFyTUWTi2XHhkF90JZI12\n7y3Ppxz5lcXeg2Fm0DM3QPgfR8iOWFyxG6oSe3HDTM8WNL2popZofodgz7r8\ntvyEy9xUJ7dwVF+75wTdJfjuuDvgfFnTxrgLRnP3K9B7ukUKDMU3xVdwTBA1\nkQU02sUhNw/9YfWlhtmPrKu7n3zfP++80uEaCsFAwQ1j4jFcr5FT8UtjZntS\nPqFs\r\n=uJxb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfJ2Z/7kV96qE9lnZApyN+lluFRaMtX6Y39CtKrkoaqQIgHzFokln14zjYrFTlQ5mgdcSMyAG770HfBprUs+8vvm0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.9bf47ffa.0_1587494274166_0.44013642523613217"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-button","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-icon":"0.15.0-canary.078dbd98.0","@material/mwc-ripple":"0.15.0-canary.078dbd98.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KL2X0iqU0xTuYzb/43jkFAGI44ho/afwimJXv+AH/XxJei9akkx42o0g8qS6m2q8neRhs29zJBYBnlnbMT4m5A==","shasum":"57c98d353791329207121872bd7e454d1f8453e4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":78041,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2GzCRA9TVsSAnZWagAAy2QP/jmWRVBQa5uwAxoSWvYY\nteUJBARdUSgR1PVi4HIorEK4+HiqFv1YpJsIAVJc2RgjhRPOUcvnh6OKlSKl\n7sFLGpxkfs+15grGBZnIFaPWSdPGwNMRI44+raGQbKDm9DZ6RdjiFgXlsQPw\nGaWEEWmK+u4P1vcdkePjLu95F1uZ8lhVkB+CSbmhhX2jMZ4qfPEN1p75qITo\nFq+XpR+KuqWeA0zj3nDsbO0CqN8x34JC2/G87Wz3B0z4AP9+OgU7c6l73cZd\n3irP+u7IGRi6k5+i/H3Dd+4PHkuxmvNxS+Tbh/dnP5YQIzDMNhFg7WAH2fPk\nx6Hx/IwnGq6C5q5urlFcGJxegMzdPDF1Kxy2ksccTvKEfXFaMOOEGP9G0X+A\n/afWZj0xkqs/E8v4x+yPQqAK8X5MZ7eS5HVZyGjotM13a4HntcoOugM2tEHU\nlHxJ9FUJ69Rtdyva7PJB4Iv0nA0WUfM5p8AhYbejsiSLPs8zylgQS7SDyKYe\nLG9ZGv9nQi66gqU9O5n4qgmzdoytKFIDAPS7m2lPhzFfP1MTcANp+l0qcbgR\ntWxFZOihMNdq3H8lHjQ3MGKZtd2rIPsDpxSr9FAZe+lqvMvl3QUpQ7zH3r7X\nETAdIb6t98O4PYMAGe8zjlChUXPd4bYB4UrI4hKVqcIh7H9J48ZyRFL2Udo1\nFAMb\r\n=d34b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvmfehsVX94SC4BwSKk091jCgIqtOgWRYI2PoL5io2cAiBhjZFbyDZb9Be+W2zkWnx59SOOH5Tzeyg8CRJLJgmJBQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.078dbd98.0_1587503538966_0.5474300862953381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-button","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-icon":"0.15.0-canary.953015d6.0","@material/mwc-ripple":"0.15.0-canary.953015d6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ClDlEBk3Xy76SExel290VwrWfVGo9Et2dH0UrfMZpVirR4a/DnkU+r8BkLKUYn5nB82zq/l5ILneAirdEG1OWw==","shasum":"c5cae6517dfecc0ab6e6d4b73c79255ca5c38202","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":78214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2crCRA9TVsSAnZWagAAGA0P/AkC+L89w/qtzjlB+3oe\nkr4qUulp7LEMWdcwnjvzq8zINBsxuc0g4kBgBqTET4zovcPoJe3qNlazcLP+\nqsyGUIWUsDmAc9uPbaG+LPj8msdQbYxL7QFnqywU4o8Ojno+g1H/B8zaM6F5\nBMbQyL1d223JmqpmXzyJK8G3FphXcK2cObDF1FVxuJvBJ3E5DchKDGO4/PJv\n0BYgV46CbRYcP9/BVr1ygAnrlpw+F0gTxMOg39hYlZw5euxjP20YtUZxZHCU\n++l1I9J3BDbF/2uFmtpOmjm4cOjbRdRyv9fAU193Bae/NOmJX8K5Gt2404NE\noLIGNG0+L3duynCPQYAnbtpqiNMgVmSTonMzz+PpjtpvirbPjlfsRHQ5vXUS\niOBZza4r2KQhhKzmAlxJv6p/GsF5ogqoJMFHcB4k0gGHveRDg/2v15qbTKfe\nJRJ8K1pd9MALrVrfCb35zGscWBX8U/RT+1ZU50CZUCHqn/ugiM60m8TkF013\nRdi09oxnNp2TIRG1rS/Chhplzra1ZtfrlrLasA1iKfkoyIjlL5L7YeRa6YH9\ng/+K9C633BvWJFKa2OBYsLB1O13lHEv+2610eguxXQ2sXW2/pfa9RXRBrCaK\ndjFUglr7Imw1oBigFp0LrO3sI1Y09MoSXxu9xBZaxNJGGr8uBvgX3jjBlzB1\nWkJJ\r\n=AUt6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr/MNrkAk3r1gotfzBX1qmhQ4cqxStx1fg7Mpb3QDxTAIgKdIMhFSiH1Hhqtvih/M3xOOq42vogJwRtMG7ZjYQ85c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.953015d6.0_1587504938661_0.9652773993822308"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-button","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-icon":"0.15.0-canary.c360ec63.0","@material/mwc-ripple":"0.15.0-canary.c360ec63.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PJsDf/HG9AFdHupqWE1DU/B7WfByW+nFL+XRerHU8WF2lOQ/mp097tLFgSWVRjS4U0tdIQpZOpSmGOf+53pDEg==","shasum":"2dcef3f6e419262957b2b80047cf6b74a961a926","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":78214,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yfCRA9TVsSAnZWagAAQnAQAJsOnISAXECYcSKPmdOd\nSd2OJ0CmNiJa9QzZbfkHvVAaD675fZgpYqFiTJaRpnvKG30uU42i5onTKGYe\nXbMhPw/zgJgyXwKxryHi1SA1M3jHB0KVH3lL0jlJL83b8LPkAB8SF1/Yf4QW\noAMvjDjmopqvo58Nn5Zqqh9NjOMDGhsUkVBzxjxnL0cLyHfgmzKXFVSu1FGy\n9Vzmhr9601JBxjLg9NVD3mEJwKD0Ipo7H460Ftxveq2dUS/UMC7v/br+paq5\nnL9sMZrxHsQYw7ZPb5tlkSnEOy8mrdJLZX2CrYEW9wKp/cRUYYu5Lu1MqTF0\n9L3uKtouBFtfnLmGTAFPDnGfAuMrd3In4TwWTG9hWWjpI6wFZnXcCKHMEM8s\nbsgsPEbVY4ePNazQLZam0FIa/lJcZs7vzqfxY4USOrGEQ1q6go47dx7MtF89\nZDlfcIyMTsjDtEoQP89SY6hfEsADCoY/k++QfbopJ5FRKhZMGGSCPKzLIX4V\n85+tmY11dTjfw0JC0A3RxLRq0ESQ3As6mvpxJ+Kwt2X8KTzeamtDrwsLhXZW\nblsMl/auvKgaVgPqtzis436bBhIAgDvHl1SqGxdXJc/1FGUBFGw/EQjf3+aa\nev3J8H2ajGY3+S91Bh4Dx3ZwFcvAOV2QO3vr4LVVQjG8TjpLygDIlZS0zEoY\nojMe\r\n=tC6j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC43SCPSyA/Kz5yQWBrs+I48F0EZxLbW9LdegYagvBtfwIhALBSR5DdIpz2PQGpLGUtmyqyN5Yh+wzlmB3/4V8fEJzc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.c360ec63.0_1587506334763_0.008764200383789111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-button","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.c141801d5.0","@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-icon":"0.15.0-canary.d71b65aa.0","@material/mwc-ripple":"0.15.0-canary.d71b65aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/color_6200ee.png) `#6200ee`             | Background color of the button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of the button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Zxm8R+LmI3pLteSqMwmQRw7Nc+O9835MCgGWnsw8bEYJrpp5ijZVd6axMuIT+kZglZYRTwDE+6NTIePKLGSDuw==","shasum":"dc860cc5a3f5e8b34d5a97ee33baa9e1b5f6b1c9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":78497,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3W3CRA9TVsSAnZWagAAUXsP/1ReF2Lnh+L8CNfYTU7q\n8CxuaNLOOvbLSlcE9atFfu79U+iIv6poTthRmdFiNKgnlTGM9PRJVPNb1425\nhtpGlFT8Wq2eTl+YZfYKFpSmCvEzQrtjLLKLFkvFpHKp1q/Fl3Civ898NU6S\nIOskpPmr4ai+DzVCcAnQo/JxeHAkSdKomd/T5PyxCPXnOlUsdYDtuZOM9Sgu\nLPrtJHuu1JsogEtG0dI9ORvQpIhFy44zQ9yg5vdPoit+rYAD2+/najnzx3A5\nweYWL2t4Yq7xFfGkI+80x6uY/I+BrOSJ7pReClYRvjfY7jjaCEHPCXtZngel\nyFQYgkfM5TzgX3w1cp34nekDVV6w8GvXQpRyjmR0Maqfpc/fW8cHrjt6gCeX\n0yHDwH+bVV4t+7W072gYLLy/wfQEtcSYCv1fYBhdfKfLixai0O3Gqe8FPc7Q\n+SIkiF8tRjFcJgXGGGMGEkINzJ0O6wFf3rEZvpRrimMcWjdZlROsmS2sW6wv\nLMEgXu9HDhaLbZqZXxd5Uby6V0FAjymsRbfRywhBBxWDdnfKx1srNF8t3HhA\neOBWEsSBL/cFV03B2CXq+gXgd82QQxW+UGT7J30zDa30FneJAq5800wgTA3M\nF2TPmdGHhQw4fY3i+r12Stk8qBt/5q/EkSmNzdHADSRUjZoyzxIx8R9iPEcs\n+c9e\r\n=nVKF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrlxESLRRgfOXu5lFE4EhOOxw8RDJGxnMPOyuxG458jQIhAIoanDcSve3JW/f2PREzU2d2Pkogt7Geezq1eC7edPE4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.d71b65aa.0_1587508663290_0.6415835766974256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-button","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-icon":"0.15.0-canary.58d51135.0","@material/mwc-ripple":"0.15.0-canary.58d51135.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W/EyhduR6HsR5C8qQE8yPEtKraxkuJUnOyWoK2YCZhzxC2CiA1kGs236kpqF9RfNsLf6bZ4fkAG+ustBCmcaQA==","shasum":"0b5e55a9b2b35006f6fde8afa47c62d8b732acc2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUFCRA9TVsSAnZWagAAzUEP/0ytAzJJIHyLGB5crJsV\ntdXv3XpXAHTftKn9cDuuIJg0QqZXfpxD7L98Ru3FCF+H5KRpLDjfpyUxTNUA\nvRSW2mCkYPktWlz20zRzTP1/+OC7EMcQyHvFUNIro/cEAD29zLCC+bVk6eGi\nOwTWTBzcY29UrB0YCZ4oh4haOEsWIZQJM5vrdJTYT4jLLEfCSKN8twPljp0H\nIbDplTY+Uxw5JYMeCsZmrAV+ga9zXILZTM2kBDnd5BlqBEItgaKHgttiVLrz\ney3ZTm05GioqxPKgThLFebdZGgPTRIAmUSkcnblvvKbv1XrVkUj4O7VTlv+A\n/lf9ARxVAKPMS/twwqj/h0fWuVxFCDfI8qE0pgUygXcjRsTBAALbQSg6VVhi\ntZpEWHAnTS8eK44MTq+iQsOBPa7+KEwT0tS8VzGzyVp287XSQS1Nz66Z1dWT\ngKhthVxOXw69bENvYEg7iI8WjpOXA6/EuNnlzYUXdfZL7SWhAMnjA2uv0/cT\nUth209u7hi0nSL3DllXjgKTVwplJ6tTj5tgQJaiH3418u+e4tz5hhiBNOM5I\nBZ6IHUwLdnSe5OP/fun6yMMmj4f4OxVUy7rVy5mv1tx8+KCkmklp8sT/km6W\nvMA1l/EF0ov671VIJrt5NbL9I8zGtQNjL4RB6uRcd7C9v4WLd+SQQXhVHZNl\n/pT4\r\n=VmLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG0/1RaJTf+aLZItvAPTPATBB+j+3qb+msKMkYgw9ZXQAiEA5EDidpbYx/yCimct7m24P9cU/LppRwSmfrykdUAKPXw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.58d51135.0_1587602692950_0.35859833664937324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-button","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=6.0.0-canary.28d10a96e.0","@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-icon":"0.15.0-canary.d0af8ba3.0","@material/mwc-ripple":"0.15.0-canary.d0af8ba3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5r5QJq9h6t53tchhnmYLZ6a/fhdR8tsoxWwfAwuKND8BRlS4sAyU9/9bWUzanC7mn0v6MnMlQjlj0cvSxmWtQQ==","shasum":"569c63bd3983d2d19598bbb3a59a01bccf154bda","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodn1CRA9TVsSAnZWagAA3fYP/3PG7yVwzo/s5jVc0IxU\nhMOosPZNE3UkpEvicQmKVzTsl6XOmCpZDKMFFRd7XHrVDzRXn55+TERBFXHj\nhYcgrlS5l6f3EaMGaYmwZUWKKwPipruS9nFnPyvSpwrXTGIkdsHFVrSPvMcJ\nlRwVVay9QhqAXQ5muQv6kGo+sV4EvqMn+p8nvIlT0xAASNWL14+7oi/6NG+Q\nosvguLw6tLq29Y1e8jatNoTGdF3AnNQKZVKKQrwEhwqYoy9nL6OODicuMbKc\nPrF4h0DfIux1KPK7xuVB6JVjTLIgyWxswTJwawTSjB0qIBdcnI07vdndBLqw\n8pJnjR7nVwHbDd6zRP1hLMAaoHei2fnHivJQRpUshm6fOgYZTPmAeOuzwHCd\nJ7CBzo0Rv3vNvMQZzmvDXIFFK3uLs61PTkhQGB5xqD9TfHWTrCl6V1Sqh/bd\ncrCCN2fi3OSGj3rnN83jGU6U0pK4JqY5acBW/k3Vpm6Z5AiNkUIfSGLdxkcS\n8YpAmQLooUczAgdc4dOCUFFtBxakgx9hesdWf/UsSdLTciikRzJte4lVmbAj\nVUN8BMHwbJhb1vXSQrYTGaMLXVc/n0S/0WV9Qyo1Z0PpEVdyQMm4fcTPJBwK\n2XLmhJyBB5uskVF59Wz+FMHqyLTtirWOV+iMbakHVeIOsTKxzw/ui0fRiKfA\njMor\r\n=eSrd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8OcSH0WL5ddjRGJn9F5MDLHQJJp4s3ODPbLdnYytyBAIgbadQR8G7o708po65W6wLqZ08Zm+N9tZFxi1PPqiNJSc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.d0af8ba3.0_1587665396912_0.7761429723033406"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-button","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-icon":"0.15.0-canary.8872b17b.0","@material/mwc-ripple":"0.15.0-canary.8872b17b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wIzfnWQOO66s6RdGj6G4mJGriaTuV61UUSiicT+Dcmm1WUYzu8IV9FUYwYiWg7P4Bk7SUTvSeDfXQUYjpHv1XQ==","shasum":"dacf76dc9c101a9a099a04d678d1b229dccb9951","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1dCRA9TVsSAnZWagAA+4sQAJ1TzdiIsWIve18SF/yl\nSd+sAMYMhImd6heJehBUsLcVqrOvZYnuvTe8DOhmOen2Lm61pryCpl4TZY28\nsCGimWlhlhuk3j4yHalKCn1HzA9dwK9OIBTSnk+zbEpSXoDGDmKfX4+4mrNj\nnjJdXSwEKMTOI0rg7WS7BTqgzsuzt8uBulouzbO/dateSb3Dl9zJhy+VqDFO\nAPdi7IsBW7OBK2zSJgu6QxxsBvB6SUa6+K1R/wEnVNhwuaBxdHomClUaV2lm\nPQqt14DHP/g9U23Fycn+LIgFHoG0iX0I+a7yPleseS1u0OKCPGl7sSQKIPCm\n0Fs3fhY1LCRMKqyJ6jjJXSqlO8ie1d3Fg2UYSCX9kYNCbltnuOyEg3BpYMCJ\ns19/oNrmuJMIlRKNrkjDCR1KfmBNlKc5gFgiuf6SPBbNn+8uPjLjH1zuO4xb\napHy7BT99XXI5lQuNXR2shZ5hIXzBlhxftreVklUuckbTay3iHoBwc9qRbOA\nxnim+X4fWgqu96ArUiHcF2D+Q0Le8IDtQdYlVxZUk2Ra/kOnDM4HzG3I/MEN\npMLD7ZAR5GT1KHJhbqkxQChJmsZSkJ4V363kM9atHYBPJS0fPsx4fQCIXGCm\nM+ETIRFGdyX4F1ulkChmru3o7RMIDSqQX/1dFGqyuFEYYvWkSspZihGbaScS\noltw\r\n=TqVL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4a8THIHFyZ6laovslpsNRd9Z+JFj0HuxsYvpk063nzAiEA8U7Lm81RImrWVg0GLqzRIKWiQaHODYmC9biMIEgX39M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.8872b17b.0_1587674460997_0.028658015154581884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-button","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-icon":"0.15.0-canary.eca1a610.0","@material/mwc-ripple":"0.15.0-canary.eca1a610.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QwF95cTFijNqVSd9BuVHSahobA6JKqcT/hmarUxYxMNJ62wfyqD/zzoC48xCuOUclkhB53wsecxVg4WVRspIvA==","shasum":"3957a80729a61e5e46e6c5880e4faf102f9069fa","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvjCRA9TVsSAnZWagAA94UP/0LOeN8XJdN7nv0RS2yr\niH9HB4qKzklSuCj/Bz8FYL6AsdpZrcnT0yEQNpSKBeeVGr0hO/Cj4+bkDlJZ\n7DRpHrgcNvbSNsqwl6aEUMuEu5Uta2cudddq7R9TMi17h510jueWqswmgB1Q\nV6sYNd9Fz/5fYz8Dgyu3dBr1HHDNdY5sM/mnCWcOf2o30bLXLXFe56OZJdMC\nzGBHHvUmJ05iPiMAGM2aGbkA1j9oPVRdEbMC3v2/g84WvoEx4W+tbrGFm9ca\nh+Pwn46sWMTPozjX8fEccp1w1VAqDdLP9WCCmwV1sNNvdmzTkvVLi98fGn6O\nQNvxfKVUlkBVqda50rIPw/RCimmUjtONvgQz4lE+MYeUYwOxl+4avH7MhSvU\nxeB38KFDcaekQX8NozzYHMokkresRUDpoVUEcS4hv7BFzq8v9kV27NwyDKLI\nFUyqAC4e0V9vGfPqunrldEqG+3sCqInX1G/YObNNkqn/qNG+LSI/DqvtQKgb\nGNbgk1+Cg6YgLpVNqUou2FlqX0ylqLHnZKjkqfGuJ2nr0opgsVNA5Vgym0Ag\nHM0EW4YvRW+8lJL8H4ybHI6mcUUg95qQqHGi/odrtdXVOwrs+wrTKogg5jbw\n4mjblNuc5NuIgj7p7K91JIIsLCAFnnYdBkGSCKw7r+QBjQ1Z85gNrFoHxTnm\nt1zz\r\n=kSMf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICncqOrKHPO1e5UcE/YVLY1XZccD+1j+Jg/dmB3c+a3yAiAyyCyWmlHygnquWibhzpozgGIzrBkT/Ndg5+mT8nL9Cg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.eca1a610.0_1587678179389_0.7835997732980087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-button","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-icon":"0.15.0-canary.baaf529e.0","@material/mwc-ripple":"0.15.0-canary.baaf529e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8fdd9TC+gu4la6+iAT4EW3FWfwsm28By49ujEtynUfOYFKOSfEC7yT8N+fxy1YYj9auwJaB/rZQQCPKXux0YQg==","shasum":"4909aa1b6f28cd0faf8b4647d81045403e51efb3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpACRA9TVsSAnZWagAAfG4P+wbixCN2MUF0fFnfcq0r\nKckAvzUBKFNWBeOyUYtVdnMQ03+2hPvgbsWTX7ZhoIESuAg9VHDgEHh4yJYy\nf8MgrzeiCEUZ5ryxX1CnP40PgftEuC5wuj87x17nPhuUJUtKiVayXo7QkkE3\nLTCc6V0ivSUGhMYFaQ3rSW+pCg+kjAk62Ij9xctga0zOUb70yBzV3ciB/a4G\nItuKZeArOTh7bns8ItJhfbngPcoAjqKjgsB6Jv39v2azJ2cUPpeKKXd+tv8L\nha914hYDhmn7dKQ/nMVpx0n9qlYgj6vfMusNhnnnxwIMr6ggXV0ViubT/TMw\nfte5u4hyWCPPcIKr48AvuVsRbKTLyVkdk7BtO9PdIGWqwx54/wD3yy1L1XIo\nNcawGO4hStIWQOw93zuLs+Ut6RqjOi5fMdmDmraKUrww1UxF7cZBD+rYJI+Q\nnyxpwcQnOzMhelDUSu9taK7N/A3hrMthE0xSh85lTVAFibA2NpJFOfdW7oZO\nGJ10upkyB2mX4GaLX2Z3La5XwU0TYFbshhhOmIUvFLg6ScdK95EGGcGIbpJU\ntgMonBtpVpoH+6wI3FQCkOkFwB3OpTTAlBFapBqzmBfeKsrZC4DtLxjS2Di9\nk7s1alGwa9TbLZxouFpYSV5IxxQv3lhlMLCZuJ1zOq0719zULOW7xJPuyjJg\nOJzm\r\n=nQFo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRXC7JiKiZuEmR5KCDLNnwGSfRzCDom+PzMgZSwu1SDgIgHZBDEAPtVSRZnT/CY7FEMA0j1bbkIfw6GQBRnP7fEIg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.baaf529e.0_1587681856423_0.547012916923195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-button","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-icon":"0.15.0-canary.7a7992a8.0","@material/mwc-ripple":"0.15.0-canary.7a7992a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-i+5wbrxCJL4cvfSB3TwKccmwjAfFhfPRW2ZqYCUTjEpCvxfGsHQX9dc5ygRsdzr6v9mWkEzYQXfoIK3v5Pj+WQ==","shasum":"4e81e4a4b6a833ffbc3229d95c1bd49221f1e673","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFcCRA9TVsSAnZWagAA3J0P/RBDQ5BhCTBB9zdosDUk\nuIlHpfn3p33GtrCPolAY0mOOot9wDMIpjqqKVrf0868+4UBXo4Wk8gA5Oiel\n32+Wsybkr52AfeLNDsZq4ce1D6ITsCvSRYvASAt4pJPRWEoOkfuQKWiHdtil\na8FDKMmGzKAok7uJbj/5M9K1z48TQgOs27g2FpIYxJ3L7RRKXwUiGUAYl6ph\nKM/Mz3XnbPtjFFrzZN/16nj9LYVVJneXDCu9OowWhGV1ZIQueMzUgvUnLgtr\n+X05TElu0+NpftixWTQ2XmyuOTprmYCA1nWJx3T1ZYhvw3Hje6+HQYGaO6v/\n4vj5c7K2nd2ZYkYcFg7T3hUbW0K5PSUxXGF5OvZevl4z1qSdzskSd4FSOwQS\nitfJajHfO2UUcuRjDx7GdHZoI3i/qlDyY+ie4UBaH7OEc9FjgiaE0IqjWRqJ\nt1KgebhQW5HuOQRUd6Ujj/PIdt0S1b7Ow2MGc8HTQzgdJN3GaK/QJmsciSoR\nrO9CYOfHjE2ZiiFA0DJhv82IE3pDWgR8SFaW74LpOY9wk1X39cfYRtu+Ud4t\nCAEbaAeUGYdOHEeNBUdOlDgIhXR1ejpuX7M7CERaJz9YcWxOK5NjosKAXE1s\ncOyCcoogtA/b7JGvI8sqMno/wsSU0kBgg4P/p0VEqAgXuMOAUOutvl3kaP6L\noZUO\r\n=eC/Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDf9iGTfLVx430tLWrxcI48p/nKpz+w+hHmNL8MobSHsQIgPtvHqRb9dDAwH9pRzB70GHzqC7jQ8Jbs8y6kRtZHyfY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.7a7992a8.0_1587683675579_0.037165962155725873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-button","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-icon":"0.15.0-canary.1150d64d.0","@material/mwc-ripple":"0.15.0-canary.1150d64d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7UJLVLOgM1XiTX0w5lWiZN+Ig39PVzkEyxoXbCPFpZCBK+e9H8olm3lI1RhJ1y63n7ymqvaiUHMUomT3uU90Ug==","shasum":"a90406963d3211ea75645deb633fbe489c1513f0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBhCRA9TVsSAnZWagAAoE8P/i5H2p63gYNzfSMQYClE\nXpfZc79dwWGZnBMaec5jsxGp8uMNbzXUFE2MJeiHsD2jk3z9RvSp4CUmlml7\ngrWvpggqwbnciUM6nAt/WfOUFO5S9sI3ofzpVXjPK+1DNGNCtXleq/Wm2u0j\nQSYA8aNSJT0br3ZVkvNPZJ/a/mXkvUnxSbaeAvGmn+gI7pFmGCZyDTPO5dSJ\nmRnyuNiWva7pLGqeS080Ake32VZBJGeeRP2dloTBJukRzSbTTTv+AUzCxDlf\nDTPYCZTvBI+/J3KpaPzVdAf8VCmulH9eFsW5q8xylfRiL3Ip0ZSPoOX67Xvo\nneav2xp2+Xwb47gXDiNbpxtKEzGmny2mA+Q5d5Fwpz2pergHmyHHASpZTy0l\n9ZCW84fa6Ru8Y7oIookxni+JmpO/PkQ+pfj3EvJp7CgB8+cNGAVQannj5shb\nKW0klaNNhys3cWj0ltqyvCFIkv6OB4p8zeNE/kpUpepqGpKj7kCzQDYcCsYw\nN/gmS31ahKSs7V4bfzThQtsvbLTBLAirGtJDBIyk9c6dcYTfgUthSCk9P00k\nQWbAA1jRjK6ii2c+HlQcsX+InsF5NxrYYHodevo/f1YQfFgozkLC6NOmdGzV\nyuEk05pIzxTng5bdxxpG+ZEmL6fYA+G0H4D4P6Td3nzyKvtmsbPXvqBYshsn\nFcFy\r\n=C30j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG30r3IJ6MK5NuNnbYacZqtJVAPxpNm6tFwIpEmoEbw/AiEAsz/LWRuy2/Hj+eRhsvtjRxHTAtRuDsNr//2ejOXpuKU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.1150d64d.0_1587687520554_0.572652112135249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-button","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-icon":"0.15.0-canary.dad3f828.0","@material/mwc-ripple":"0.15.0-canary.dad3f828.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HvO9KuKamBh2WxavIuUpzxfmGKEhgIOQD1wQquEQ9oWMPhiQX7Qp5fiqNutd0kXcN31x6AnoKrpqg5syGkkj5Q==","shasum":"974df4e14684b46c3e083abbeab5ee337c78aea1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eICRA9TVsSAnZWagAAZYsP/iJgKsrhfyF9o7EZ/azL\nucVzq1PhGhbJnpwJainkwbAeaeobZLgkvVU8/am8WiKskh9nt0TofUci9L+g\nzdJFH7KCHgyEspkHEklTRYG3N7hAP/0earHs7BIqcdxlk8ME9OvYYRSEhgH9\nODmmjv4cj2cZ4WcAlC/sJtxw5P0jrnp2bOE9ruZ4QTz/iCRdWqzisA42bN2I\nXf7aHsworyPtUHpc6AxY/TQoX1g3IYStPCI1QAkLQk26X/hc6wEnJOpNiJrT\n0ER7EooCv7oWHAHpHqip9iHVT1Y7JnwxXA+JTnkE9ddx73g3naNnWdTlWgVK\n+U/vSkcMlRB/9+YbVwzrpDOe46rsVr6FgSrEZ15uJETdr6Jwi+k8+AyCTYjL\nu9jOO8Qk0BJvsZe66oS3I/VNqzEw9JDT0lOPg4rJp+t91vQJS0G/DVKCHlnl\nIx3mX9MSPk+JwDXGXAhqtC8hcvLCSkNZ0GFYep4GYyDPv+UQCEruYr4tYEJ+\n8bkHcYnc3vX2fdMYnNHUuD6dc54lPrGy1gfFGHYx/akvY1bd7TxdutQgFdOe\nwLH0uycjFj4CEN4sh6QK4jQgD+a4N8gSDX4Dpu2DeJX8DyNhrrdeHA2l9tEm\nQ7Jgn7qHc5WGk0fWxT4fnX/8rkvsWrwzBSBeRb0Y/VUjqz5E2rtG3A492ZFf\n7ZbM\r\n=OVo3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkdHFZU49jxywZ71OAK23Jrr2UD8RomjtxaEqIW1vUOAiBCXFZvhV2MDqBEuIcLnph41NTwJz5Gb7Sw4vqdJjHofA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.dad3f828.0_1587775367592_0.16859333576611868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-button","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-icon":"0.15.0-canary.1bcdb47e.0","@material/mwc-ripple":"0.15.0-canary.1bcdb47e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TGe8dB9rDJyMfOQ4hdOaiL3r7JGr7BBcPRtS3aTihsccAKeuaHTsdTx/oWD+6ylPA7M6utirBReDRu7LP3bB8g==","shasum":"6db57d8577520df7a4e72dea1979e86ab1eea80d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MKCRA9TVsSAnZWagAAPhYQAIgCneWoTEtKePn2XosC\nH8PQjERyuy3kRjTB/AzT5YlSUyFxMyVPLciD/B8vm6UY4U3R48lsIGWL/O5U\n763n3ynyyxH8/3A6oY+/Aj9XnYAcw/Fo93llHjMAKAIHJ6Mp7PqHDuMk5MIm\ncpVMGsNuaQE7j9UBOifCMRps4lYt0UcNwiYQ8iDI0YowhL5Dmjd7NbVGi3Tf\nSuXJkhIl+ySH6F902iuPdFmUuGgw+8OCACmwAjltwtSdLUDxJpJI+5TtK3i0\nsNcEfYgvL6OGPkOZ4FZKd7GOoRiSlMxroCunuy7HAV+xom0AGMv7cfO5Rg1H\n4wRMqOML719LdZ0PvsyxlwPRBkcr0/8YKR5jg+FQuMz+8/syd12e49vOkzpT\nAxibg0K/IpLkMQ2Mne3EKcNM12mHpbTC2Opc51G5T68bJaFDXAaRDY7UbIKy\nBKDeEZ8fzTc0v1tYkXF8WujvT5aNnWwkIQmg1vgYvqM4hgnXDWhocCYW3sVv\n5NR20VmDZ6lUU2Zcaz97KZW0Pmmd2QU/Zc+UJpIwBzS63r/saiwmqLaleaq0\nR2eU+S5HJTFklC1Zf81YkIrFsmYrqoKP1BEP+MiNQfCUh3SPbH1y5HQ5KJ+D\nU9ibW6zHdHxMJWpeZOCqnbMRoru0nEQ2OvPgxj6nCGZhMKZ0YpQwCAfa7iFI\ne07x\r\n=Oo7X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrjqTvSW7z52Nvh4oAKD4CEZ5sqcxTNEyceV4RYE8DvAIgWZKvKJaUd4eiwJ3n/BIGAaPfzX9V14RY1jXDVQ+/B6I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.1bcdb47e.0_1588036361882_0.05750235930175562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-button","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8540808be.0","@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-icon":"0.15.0-canary.86ff1b9f.0","@material/mwc-ripple":"0.15.0-canary.86ff1b9f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e8okBYy3qs5K9aX5nTSzgmerW9+ptrJIUXpb1L2zdyvlrNA6IpPgRyl1XuT91Dhn6pVdvSLOKrF6xrq4QVqmbQ==","shasum":"f4427b97a2977c5250f54f93f3ec0263198b6256","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5svCRA9TVsSAnZWagAA0EkP/iZIYAeZGLNCeTNEVu3y\nRD5Rfs8jGLtmnersR5vX+OFmrygMLnkSTF9cNuGbXiyt6fYltcXMy7byEt58\nfr58AdHk8XfUg5d/tv60ovzmqrbnvtTiPqW2UqN8QZ20Qt21SuGmlsu16q2U\nw58ZJPhnIKHD7O8U0XxRnj10rKXo/PtzW+KYHSKM6TUkAZcyHf4YCokfJ9jk\nv5Cj3IZzWkJxF6fswuEWbGNoQ6zdpX3uUHau8PjPla9HuhFDGNbqAG5Kuwtk\n0xSSUMnuzjKQ6D1VWjOgY1UFypHs2Iw5LO7l2twhmEO5cCAYRz0N+W+eT0bA\nl42KItZVcaOJNcEPrM8BaLdKSm2ly3D0Cn/IOe5QWTEW5rucCkNvTnI6Ktg0\nNM36vG0vtRRFw26Ud8v6nCDTuRQlaysK1GxlTHXugo2DllJrbpUG9yuUAJ3N\nqBHHZdnocuZDqkAd5iMAN/oc1U2GFrUwCCSdUufUn/OHFeuIFfVQJ4oPO6Sx\n/h1cfUpVcnxVmFK6jHd9+aNj3e1PA2dSBQ3FrE/A7LXpFzmqNy24XQ8cDLvl\nXu9LfoquBaqvLdn3yCHiA4AYDhzqXWw79rz9DHgUNC6cPHJ/QaSVNCB9vEas\n/eAskx8ppajcx1UGCd341fWo9XtyvzK/p4149eCd9vtXypPKrz4hbHuasrSC\nz3rM\r\n=4+s2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6/BXGTQhhXo8EI4RPu4MZ+8bWGi0lgdMu2XiOAjqsOgIgYDyiMIsBziwwoGWVUqCJ+J/9zylnZxygbHzz0FLKAYg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.86ff1b9f.0_1588042542992_0.8849593233809081"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-button","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-icon":"0.15.0-canary.54a86b20.0","@material/mwc-ripple":"0.15.0-canary.54a86b20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jTJ7ODhuct4OZ1DjyYXeciXAUTvWprDfIPG5AQuv5Xs10rE4XeK4ritUO9kXNorsVDB3nITCJ4vd/tmlruDUig==","shasum":"8df1f6da12fd1853f32233aabb55f46ac6337559","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6BpCRA9TVsSAnZWagAA7h0P/2nI1VtYWqyFMOuCGWof\nzq/odmnUCm9qFRfVyvxjI6AlUPqMEt8qHbOW+pQ+hrZhe1BMyyq7ZCOV80mP\nWFiGi+GbV4pXv5cB/A+L4POAs3zomfTqRmEi7oBaiqyb9U0DcuDdFBD7dZ4Y\n1tK7JV9rqBJoR0y65RYty5X8vNY3dpUAEIkCrDrX5LS5Zy7P+8Qi5y84QdUn\nbD3Z7ck9vhEj77dNe5ujigsLyHdCwUfYPTpmGLleoyJzFTr7S3GGI9mU0Qfy\n8Czq+0jyp5H/9OFHt6x6P5OYoZV5x6WDKVNkLr2ofRtNu7Sz0Yyqjs9BP4yk\nVdD3kIMvhN8MRN9ywH9VY0DWu1JtiQbcZWTAWYYALIZJesq5m2umAz9A7TRD\nupbHrPUe+ucW3OTNXApNRg16gyIsRME8a21FrAZRFiI69gevdSf99cfQ0uXJ\n3+if4iN7cm7P/xbqsbpdq3WtK5fuEJvF1qpB990XDOAs4akrGLZ6SKI9rLo1\n0JN3dMkRp6fman2srnwJ7F+ya/zCWlhdKcN0y7aaza3gYcv0+Bvx9XqFXmwH\nKT6zXX0xr/M5NrqQUskdjPRtaWNyE8iY1n86wpgc/Uk98K3ASsWWTP/UQ+0H\nsaibUNcbDiI1X3/mw3tbGowxOdtByn/o/FyU510VHtr9HkQryRF541/M+rsR\n7PeQ\r\n=uBVa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrK/+9vf2vteGuk8VWSTc7SzJ8SoBPnYcOzvLop8mT8AIhAIovB+4qp70xi0hcjo5f0iVb7gHH+gKAyYPGEtx8tZY4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.54a86b20.0_1588043880814_0.11254447875566975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-button","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-icon":"0.15.0-canary.938fd24b.0","@material/mwc-ripple":"0.15.0-canary.938fd24b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-13gpHGahvL+faTQRC2Ev7iE171f/rywPRoBdWbSZO8GiAtVbVes2dnSINJFywPFnjRCIkJ0l5aasLljYpgT6/A==","shasum":"720831075c211c448ee517c7f7919955a9ba3f14","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqilyCRA9TVsSAnZWagAAUeAP+QGXmMO9svjNE0G4MTg/\nqlFK7Y8uA+FuLdopih4Ekt3Vjj4l4r8vh7vQKpooCXH9PxxT5pMq9GpFXg8a\n5ZuyhHIndb3LNks+cai/isZYx01qPyuh6AAZjlwY0t59l5RVLMwKOcMi2jPK\nqJFmnoDZWM04SSWM2PpvTgHToSvirSTgRsrioD8r0/x3hl1pZ473/UP3C9gZ\nf8bkeju2hkPBd6m3rB4P+ABX4Hinm83Ue7EIv0WY+fITWlmysashMuM169hL\nkyWtym3fcKHNNhTIgY+Vebrpob/jfMKIeiNsvcP40Nm0kH6PuUOKRUyHNmcy\noPiOMEqjWm2SkV8qO1MMRyRHvQymfDa1OGiBdE6TXmi0SeQ+tSNf1i0+2xcl\nK/42rLis3Hh6XpAojMUktTObyldJEErW//lwRdz27QLNr6DmJG10UJ2DAjhe\nhvA6gTVfG+nSYR0Xb2woxxl8mHEtVyrNoGH3Hg7qwS7T1pawjKGYlh18KnKV\nstWLdqecjSEexe4YEWvsMgLDjZ7XjDP7UNkbTtQxEdrypXRkwLZ6PsVncDLg\n4aOrgteRUDZ+oM4LheFi+ILVFfgbE3ctkDuQWbuLENGtf+LhMsY3FG9G8rzh\n+McDAj8GT/UrRxFU8JKep9IRFxho95gxi0ZxCj642mTdZQiiG7xzXoBosUEv\ni0SV\r\n=v1my\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJc8Ywh9iIOoaV8gwnEvabbMljdtGYjjk9Xw7Fu0+8/AiEA9jzDC8B3jaAETOZ9RUurH7cb44UPQ9ppFcDZGyy1Uo4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.938fd24b.0_1588210034176_0.9313482696511848"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-button","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-icon":"0.15.0-canary.39e9a008.0","@material/mwc-ripple":"0.15.0-canary.39e9a008.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8ECO9NwqJuZDUPX/8z/p1IUBemLYhxD98FheHNuqjjbA+JLxeyqm9BkDkJcxkXfsmJpKdYPhxJXEHUaVHxNnGg==","shasum":"7cff05fbd584dfdbda7b84418e43bf5d622a1369","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRHCRA9TVsSAnZWagAA1joP/2Vi8R2bfrXXuY39Xngj\ny51haHUCq7pBMhLOPwXKkOK1WbqZEB1MMlXh4BotmBNDW5ndQkcISOAXxqdi\njqSjLDFjSqYvk7x+QGz2qnEqWsRVibKdJ4PlThAwokevatGlvzMBsxjbrl1e\nOajq/9+JEtTRqJEEVnuGSzi9k29AaL795NNhOiEbcbjlGrfObRhnFNymJdNe\noeFB0i0jcJXH3mkUeAaToyrfrb+fJ9ltWGFCMHzL8m00iiXMI1MeZFmLoocq\nXXv1UQX7rpNoIMA2LSupkjgeYrjx2yIcWO1KF80BiVv1i1WcqammIS29QuSe\nt1qZ9ljWrTtG4od8gZizj8sfYYwhPJauhkDzISu/ZrFD8CGULXHs4aCGpDMB\nFoEquZH9+bNPWhZWIKiOscRi28dLC02oRb/Sh2NNlufMVr03gbs7+NWypIVH\ny/r8cxJRXbxswUh82SWU4F8AxUyazDE43GcdiwKv1yjNhWJJbcUmZn34Vxvn\nDs7fvBTzIyQbXFN65b0UrkySdJvR7GXw3ufEqOjTksaA8TxPMXclRE9TROgk\nI98qROVpgAqDKXX0Bsv6LBsmF6QwzhW1cQSH5dWCGn8t93mTncs2BJGsiM5o\nnLKurhX7/A6JjSCu76aWrT4Rg3G444Qvl8xCDePbRh/TIKqup2vT98CXu2Zs\nzVmE\r\n=q80M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIFPh+XD2K3nAS1Gjf1iBmoXSx+K86O1Yxoi/L1uDPVRlAh8lQ56L2+irxoYDelKt9yr1PMNBQFyq3q22SCWY2I6r"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.39e9a008.0_1588212807072_0.828107709635362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-button","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.28d32f8e0.0","@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-icon":"0.15.0-canary.f3b365de.0","@material/mwc-ripple":"0.15.0-canary.f3b365de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p1v7F0t/vLcIN40uiFIGMRUppP4caAJfnE1mwTD3+dmFVJGhOCje8dGKIK+WpRAOM+K4vvvvlgQJy1/0wJfbdQ==","shasum":"51d4187336b64546aa9a666ce6588e98d096307b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqovjCRA9TVsSAnZWagAApVIP/RM3k/iShxlMyaMGmUWd\nVdzE2oXH8OwDZ5P/UYy+9wDvtg4KUMkDCuQWMW0o8CeMNX9ZKcVjbKcLj7Gf\nJKJuX6f4MKzzpowkhzC+NM7GjW8PU7lUlRZhTfUyfP1fFA4KyCsaLFCLiVkj\nYcprKOis2m7Pz1JBLnMYzccdHzQfMF5nKmAVgpaH46GU+Tf5qJfT+9gGbThu\nTl9LyG/EU07DmzMeJazJZ7WdzREW9JGnEWgOJJVjLMvMlhlMYPxhNXPUdm8G\nW9ZqfW+sMbnZRARl5IAfEDEZGahEhUL9/Y4ZI3JDomDCEqi/UdHJ0Dd6oA4p\nDFMq9yKRCaiRwluATuWzptPfaYQLRl+2VN1Hy3eLNV9lUdvNxxxN/xEjhUAn\nRTio3Mpi1aZRF8FiYiFbit9TKc2GeIQVS6sh8vKjrscxYaOb5oEBcxEfivl/\nTy/t9ymoLnuM4b9L507Smv6U0za27VC71XLSnwhSGmQR8mxlp+abRsUoAyoK\nFKY+QyfXfyl/2Yk23WWCiFYAn5ZgmrBU7ztZBLY7N8cO6oMTx3yCOYOYxGQD\nhpMDWS+/0ftGhyC1l28fQuUnyFkbUGf/h3MQ499LWduB0pUfgfEP7IxKgCJV\nY7G0erm2aLEeyxGimbK0SI8inCJVB9rTW3qn0VR3qZWNbLeRtWgE7cELam58\n3uCk\r\n=ozKk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbc5dVdXeOyV9wl0KIGNO0D6ZG06MjV8BjYoJcoD+QDAiEA0jvE8iq/vcUtzvpPYH/jJL3Zd+AGvBZmP2XnCD2Vp0M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.f3b365de.0_1588235234649_0.5422067734841174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-button","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.b0f83d2fd.0","@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-icon":"0.15.0-canary.cdbdf807.0","@material/mwc-ripple":"0.15.0-canary.cdbdf807.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nM/Qxr3cAQ3cZF7bWPKaWvMBkKxGOjh5ytwvqITEgq8Qr3pne+FHbyKm/gcedMCvplsiN7qRYXZoyW4JakOEaQ==","shasum":"ba6ec8b3e89251f009ce4204bfca82e62c7f3c9f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2n1CRA9TVsSAnZWagAAFEIP/jhrPR4aCTNz8XAOFMel\npqbX3FewmVyyBq/F3Z2Ljc9R/2ZrvnYjRmzNCdKv+FVWG+82OSVdYzKL3LQt\niCr7tldL2+bKvs/+WkalngpRDA13D/43rsv8h+209r0fkxf/hz27Lhw6/RCa\noxtPZPTSXQ8tcQxKZxVTrg45sKwap0u3P7tVr33x/g6VsQKRPFT3jSMQ/qtR\nRtmR/JOBbKXBKiErKOTt0KoDVEc7C0LcaTRH9SWjv6zsuAMwZztmSvZVnlix\nV1gCPiF9XXr022/7e0Syrz07HW3rVonRc56MXisfaBdFwQLr6qCF93FaSSmx\nroEAq9dODdq5KOhJZ7eGh94j0TwniDiFaxogHLc23BluoCUJmDsYRhmc384u\nYkTuVPycMAAbbDwQC+nn0g39pWF2FfyrkkWWdnopwoSyr/udLV4fjMMHvoLZ\nUpaby1w7rM1nuaHeXxnNBdKzRUwwXJI9vUGHD1CG1xRIhzZ57RQ5Hfv5Xjcf\nGYQwlJjgumSFL+epdq+iqsguMLcXT21BY6rRC3+vqaSwRJQGZ18ap3k0lScp\ny2ElmYkDb1uQYUy3cv+j1dF/krHqJVWWvQBDskQr6kSGb3Io9f1jfKB5QHWz\naXxtNqdwlR8A/FZuyJSpLAedMF8lM1yEJ4Pqc5zqhsncyNROTGlnLVq1EaG6\nGsbr\r\n=51/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFkO/D6ZVzTHwpq98F8HWnScEcRv6lWdNOR8ZteycVIwIgF1KH/Ip84BlsIcn5vxb1422RVOuj5krK822Me5XmoVE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.cdbdf807.0_1588292084895_0.9505460064611666"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-button","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.e59906a57.0","@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-icon":"0.15.0-canary.9995ae17.0","@material/mwc-ripple":"0.15.0-canary.9995ae17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tv4qBC6aM9t/4vuRBkYxmvj4Mv0mz8AcuzpxHl5P2hTy9rhms3aiRKjRxPiAvk89swtHCsYbgsiJHoJb8sIwZQ==","shasum":"a9e4cc789930548d4ea74092afdd32e169322aa4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG4sCRA9TVsSAnZWagAALWoQAJ8h33WxabmtgNbD10hR\ngrJO7zFBrmuRyYy5ClIiIcWKq2d88BF4Da2a0MXzqtobL/mXEIlRRXPx4fa3\nCvglK0ukA0F4CPVi/rqEgTJhDcpg3T4RMQdYaBpNv5worLgu2ySDf/G/1Ycw\n57PETpEjMSWlOvRJIn8D/ueSHpVq1YCWWnBy2EFZMyIoy1f/f7fqsm3CF2DI\nRxe+/AcMmUriEQYWdM1wgOh5xd6mN87yrhzTU0CWyRrcCzYgiaBtxDlrOEKQ\n+UdkAmJJXs47bKce9oq38f3TEQyaUbcikjckjwuig2OpHTdqFvjliFvaWnsY\nmjBJzmpmFWAAHcJYOfDe0JMCkPVIH6i0GnSdx8NbwihSthfmHwKgZKDAKRRE\nboI3vQ/M2HzcqO7f/z7h6YAD9nMJiC0VRbS8sUXnAMLm5FRtopvW+lrULBWp\nz/apxNDnTkct/6kS0+MqVrhpcQ8eOjtz2Lyi0rkFa8duEFqCREBLlIn2joe2\nWp6AkYNf92qJDJ9Vy8988TlkNRBWFUv9tsP7FQKVAQfgXmYNsfI28/sOnviE\n6Kt5LzHpJYq5IoRcZChj55L3QRd2nIpCa8igK5HUCapf+qY66An5kkRwAGsI\ntV4vZDKzwuC6QA+ZQxxCQjKiD21FP1489ijgeJlvLehYzN6wyfk27eTa/n7o\nYtBg\r\n=M525\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWLX+XVZgufdrlBdyBDZCFTAwVTEqj8hcXeDVtCk2dbAiEA3MeCxR+rLJGKXAbaLSXbKG4UZQDvoULn+b7w2QW7kH8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.9995ae17.0_1588358699945_0.40430446419172794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-button","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-icon":"0.15.0-canary.457bf035.0","@material/mwc-ripple":"0.15.0-canary.457bf035.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-G6RiC+5OP9+ghM39ZeXN/jkFZEs3rKHQDC0Pic5nqriS3H3JVMVxwVS9IJEgJ190GGBrfsxVBwIAY6lW1xTCPw==","shasum":"56643b9e25c2755c0a473df8bca6a861dd12da25","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIuqCRA9TVsSAnZWagAAbUcP/iAIFus+On3GFpyMmHcE\ns9tN4QjaFSUI0F0UGBfrUXWn6+xOqwBr2kH37T2DbEnQWx4Jo2FbMj7X8Rs2\naC1ubvtedIY4PauPfW8I2XnlOt3qxtDpqCZDdEb49/beiTnLQKn72y4whPBF\np8iwRp2QrprekQ5mv0P+9NPmceZ0iN/LSaM8pv6H+ENwJf3S4EcVdYntbyqS\nFjXiubjsDJ4enFURAcksiP3yPbaLwebWzN4bTEfjnAVn92eOAc3B03Gy06yX\nybGdYPozYSYtYhpVityOImMJy0BpuBDBna98niw+bu61OD5yEITeR2iHlD4x\nJK+rze9k//1egZgSA4FlH5Qr3nCf1lSWUhR/y1Jipd0pwXs3k06jYSdnDY57\nA+hGisojxYlHDzvAY94P4o4hh7QNahKRwsrBfZfXDvkZquN4XrlbC+Kx7E6E\nSk2yJ4GWCWR8mv7DFSxo4bods3Taa+9D77k8xagIJalbG5+DnAXRwALlgWp+\nGT8ldRhFjOjvjsq3TflQfhj0HqpCmWRRo74hQerdQ1W42BobF46pXknrO1/8\nnJkvPEH3K3jVEqm+jvyInH41enpJAWMuIaihyxgdQLMjLJvBFC56Jo4fY2t8\niJh6lJVUKcZKkI3Mo+5SnkZv3CSxIeE5UFeo+Gn3+W0xQeriNYuyTLOaKNCl\n3P1K\r\n=TWjU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB2YkL8oUZ1f0LyoRLIxQ53NGkgek8XliwxZLj9EQy9BAiEA5O7INxweLYEL0DWPdsI2/xdt/4w+a9YCEGbT0CQYLh0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.457bf035.0_1588366249784_0.8430097075508243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-button","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-icon":"0.15.0-canary.2381fd02.0","@material/mwc-ripple":"0.15.0-canary.2381fd02.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wA0+fC4KfFl3EEIyY+yMvpRm/NHczssBdmsU9FY3GuW+R2xM6q1XercZR2Su7EKODj7klK7O1eSMIXw7rMUfUg==","shasum":"b1755018c9a7494778a85a7f9de43ac1abce2862","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPNCRA9TVsSAnZWagAA9fUP/jj7XemjLxwPZatYltt/\nUs7+/vEpUPIM3QG0Vz8pB/JvQX5hgZvx08rFbL8/qP9KdGXnLeKASqDnFlv5\nsGWIhpaKIL/kLgr6uDQnz0tu00ZTnD22M107D5HNpoQ+UftB0mbgKPn1LyXO\nsfNGFnHP9F+3jOlwhqXD5IAr6waDhcKrkoBO4lJFS6LXQTuxAr9Xa7RUIgx7\nLLa1X05N7rkDhfuzejO3kvufJhe/IR8c6v/4W0Khj/6fD/vQwH8V0tZkWPKE\n4jwkKa7xKsBposWaYnARkZgGG+CnA3tsM3Ik51UUKvQ/dLL9cCjMd7Gt48hY\nhOLPNHxMz8ywzhohugilRITvfjYGHyGqoxRj9VuzdtZjCl6iNqw4M1XTdM5X\nURa3PeX6QovGUR4RS93EEu6wDZQqocob2c0KCXfzFWaQtsPcCmtlSq4WkfKp\n6ndeetWz3OKGz8zK9QJpjO4Q/BfGihW6oKi4RQTiPNGgHYIQApZ4BHv2lvxv\nflhr5fF8pPoKmO9VOoMTDyChcMMLMDSeCagQkhe6lriQGR6rgw6s5KPiv7uz\n6zGZz97I3D1M7euqliMrSYazL5/yrivTZtKMPEaLTAzZpPnOiQMGq/DfTNXO\nsSxSkzJ7Iso6TdU1+SYKN2L0eUA5NI6HS2dYKoCHYQzIg++lq/NB9giowA2M\nXTjg\r\n=KSjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFPaBdpEZZ6RLgPIiSnw2EB/PDDDH+QeMlmyF0BoJrnwIgLTTwa7sSVoEksxpdCBKiqvh+ZYy5uT9M3UkHJQwmJFM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.2381fd02.0_1588368333159_0.413217151722977"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-button","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-icon":"0.15.0-canary.b2ca9b57.0","@material/mwc-ripple":"0.15.0-canary.b2ca9b57.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Qwv8uwi+p0bvuM4xokbg925yM780SlzUBjCvN3qEjDigd/bAPxCRX/cKRiwuPTh7YpqaKo6nbG338YSbzZEZgQ==","shasum":"b09ada95ce9fd22fc24f2d0a51fef8aceb730d71","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZBCRA9TVsSAnZWagAAre4P/A3CduIMcGGzPAbVqwH2\ndprLDBGUdiOC07UN/t4JhabFrj8Fxodjmxg3atqwnUOXZ3iQTCriXsPQEPNC\nAEh1HsUA58SVtoeZUic/d/br+GvmBWZFG2OjinP9xm5RYx6uxSbH3cQhUoZ8\nnYgR8gPQe8OI4odNh+qB3CkICZCHAJsG6fQApcz/XJFBaufnmebdOqaW+T5k\nSNkBVmpiF2TaT1Tfbe59362KTwCM78lQyT1nlBydHjpPyaquxidbgaggJnpR\n64kDN18eR5UlIE6OQm5rhrctblCQ7sS2Zf0oeEt/DjwwJ1eQbYJen02D8cjO\nsO9YBCOzVibqeHh4gK5L1DLdpdFgSOaQC6lRlAh4n9gYenfHW0+4kea9EpJI\nlcJK2M1OyobIq7lgZ+E3Qwn2tdKs6EYOYQ1fJT9tClanABoWA5pmlNnRsgTB\nYS6nvPlHJ81R1OUB8AxlGWfb919Cw67dsXhsOvbCDY06fEwLvvKZHv2xFCwe\niZwMr7cM0ESJqhujs5rP1EKqdw/CsilERXJKIR22OvPNfN9gFn7t2XsHbdCN\nqFYnCn9UK6cxYSKi8tGiAkSUS8HuzH7WDyVDQ1jQm8Of8/SIgzAu2KBdAW+W\n2PAytVmPq6/ZlTZunZEayskFlfH6n3+NtvjZnnL5XRzLlKLpcqswEsBSedSH\nywll\r\n=BByU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1v4ndDoLjylUyRHiXK+W+lpJGVOTkYQ147ktTGr68EgIhAMv55jpp/pzmE0Ich6ZCpOPi9oSajkHn4528sXX59x8b"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.b2ca9b57.0_1588368960504_0.41112531129602536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-button","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.15d65448e.0","@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-icon":"0.15.0-canary.b2b088e7.0","@material/mwc-ripple":"0.15.0-canary.b2b088e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gqSR2sW0h20g+UlQqdA+oEZsN3AB+E0AaZxLkKaH4ayZFTcsPwdQMid1Bpdxy1tkGgSPRCvAG7vAS3L78SFz4w==","shasum":"3af8e5254ae1cfc2777224b9a85fa486bbc7c77f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPCCRA9TVsSAnZWagAAQvIP/jHFDAiUI3Y2/mvL/ql1\nwffbiaSVLEel9iWQLfksBO1nI5OOLii8L7l6QFqpThuSYe4Lf8tneBbkgFTb\nzvLn/JzxZTknxfFZjzMZm8O0Ur7/ASyNXsFmkzNcDp97NHlScbwJfh/hO4wZ\nawGRI7tCMRouo460caj0oKFUY0k82iMYR2GejaBvEySOprx7t1EaIbgXj+eu\nC4K/X2HfFmIk0ZONM6GZPqAYCjx0vGI5TCuVsOQ53zCdt+nl1Suh/BJj1MHY\nCtrCsPaKzZcZFdaeFimcfJ7hwrbfUlBLje5+tezpG3RtCc/cSrhLPYa60cJA\n9IyIxlvV4+qCAynubrKFa8+sGZWFbaIli4xmSlbVdQ13klrD699nOsBed5jb\nM3WQxXM1YHQRPFcuLTnqKNMdq0UDW2j2PLQ85dm/WXsLoZvKzFcx4/iVYLTN\nOKhK38/7zhHBIRBbQxe91w3xrOGV7TSBjuc7IlwMsRrbFrALbpdqFl4itE7g\n10YHuSQ8Tyz39OyEShQUSS0JwLthbIGBal+C9ipu3lbrW1r6C2mnFopkgRxC\nvBhgglhPDN0+2/HV0270RB38wdWO9xY9DgL2aogOb4pr8G1E8hTdeIPS2aIx\n4XdZAPkiKFIgDMQK6nfVjPxfK9efov8uu6JKGr/gim3J0Q4DhGXBdVzsjFaT\nr0uy\r\n=ABjl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJmOiumOHQ/iiz2qdjZdbqLFdl9yF4BOmwGRQPaPra1QIgQpfkNJ8aJRaF6o6sCpKsbYmx8uR0zgldnYYeg0t093s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.b2b088e7.0_1588372417535_0.5980441649490542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-button","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-icon":"0.15.0-canary.fdd8f69e.0","@material/mwc-ripple":"0.15.0-canary.fdd8f69e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WdM7uDn8oP+G4DVigWxzkWn5RY8MRMh2sKCEdRVPFjO/9SFoJd9JDTgmDNbVbUicZBX8Efr2PbfSjxy0n024wg==","shasum":"66d3dc0674010c3e1052e66047912997b45676e4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvhCRA9TVsSAnZWagAA1k8QAKS5jtKoDEFzhpZn27kA\ndj2djX2g62ln3fEVAcSzdbR5lzAt+oqF+3Eu86EpKhSCKbcsM1+qcxsDZ7XL\nzlosqJ0crgyxC0V4e3T9UdIyhTa86y203BD9NQM08aidKcxflk+E4Gw4PCg3\nZS8w3Wg8uGNtHVtKDVSXOs4CH16w2w8l3e5kYI0LBKduY6/wxqPgZ7sR48FG\n2aQz+hkM5gM+M57ElkZMBgUO+6XE+4xx9KzT3YeJLIx8CUg6FWNjP8fwHsn1\n/3QZsbrT3zKHdqc2cIMM2YLJ1hyCNQHRSvehOpULmiwRBeMFx/qLNNMI29qZ\n0PXsG+h8V5x/7f+wKbD1ko74o2f5jV0XgdBGdtU/wzeNr/Kf7odZVTGoAyEQ\nPsq3hIuLK0wTDH2yJQcJSVjM7G5XYrN9RUdcSE4x9GlTCGuvDaYnpJbEuJUK\nnVxpun6v0mR9vo5zOhbvdmBMzhSx1GPPX9shuaMM4wIX59sYrQ4WZxZoB/t6\nROu668gWOMdEfYaMe7gICcGfY0SzlXiqA3fjUvdB37syiMHMOznWWC357wRm\n/OJd8g8wDDgDUAWHNkRptKbzkednG+dLUzChxKzQaHc3jOQts9z9DwCjDKjd\n4016obsmY9VfM3z2NA5MmhzxI/oqi89F/QMm6wZ7hqJCEnbhEn0a7+W5HusO\nLckf\r\n=FqI8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBV9UWOqhw/umYZCqYhQL6uSKKHcHVFsYY92R489QNH8AiBMzr2LZ97eeMUeu6LZqgGhrzn17r8OaDnzeT8t1VGuVQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.fdd8f69e.0_1588378593241_0.8116277782098213"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-button","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-icon":"0.15.0-canary.730f45a8.0","@material/mwc-ripple":"0.15.0-canary.730f45a8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-erImNB2p2sTmb6RnwqjDYfu7pG91M5eV4+3LfZZWxzzPkQD3PovQJZxQFVf7JR1fEH391WA0ZGjvemWlSGR8ZQ==","shasum":"bbd8d3151013de8926674fa46aeaf93a35d51b80","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1ECRA9TVsSAnZWagAAC3cQAJVZHxo6gpzPnqKk0Stl\nWNWn4SC/OQfqazal7wCWF0SRLEhTDHwhGeHqjqvcpWXy5sT9x8bPAhWSkiu9\nX8QxLWJ8SSBK7Sj/A/ZIQUoHcH+wyaXfaKwTOvhHwZW+Iy1iPJnzJq/UlJvk\nHj2yorG0sDyT2WldkH9FbECShZu18FYIgj4u/aZzSfD3ysGe7cnBYwUE4Flk\n/8P3mNXrOVjDk6rB3yOG/oo/tWNXRp6VxuRbT29+ABxCEtHdMuBq2Y1lGh+Z\nG5HtHKJU3Dkc0UJ3ZlFbkkE2PVIPMr5C7acam5qdiqYmnCrVe9QXuHR8ryqW\n8hvwyrR1oOOOKklflgvWsAg2e35xcJ5tAku6kc5Y4H509N549nncsItczbhg\ninLWo5Pp7JD4UCLJJz3sZ2FfCqtR4BaxuFd/mB7aXDgY84CIoOZCXOgtXQ1B\nb+KXG8AhZaph/Y4rpHKlLEwa4fsUSpcQGgXaC2ClMKeGUj7WVPOhP9++fItJ\nzsGfupzuZu7Jamib73k8aye0l41NTZ5zW1kjqyH/2m4iujns7mDE9Xd3+Xv7\nBKi8IRykLfW1LiHwPQlTEyToa9nGke7T/5Q4B9U5+m3AKQu1VI/kkghv/3B7\nzNMn42jQOnonQrYq+uU17p1zk5MwEj9mgjyv9o5fgqho6Tc8Qf7ioo0fHuqW\nr3sa\r\n=fHg5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC2ntFwuGHGAXO53NjV692X/XgrZ7vA6b+5GWUI/4bZCAiBPa1/i+sehogee9nuNalNnk2hAzRSHvD7hgkdxoHFHCg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.730f45a8.0_1588538692467_0.6218449593530304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-button","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.142b1549e.0","@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-icon":"0.15.0-canary.4219bd20.0","@material/mwc-ripple":"0.15.0-canary.4219bd20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/C3t1vKSf7nKFkXRsuJ5tEs+TcGVbpE173TXfjdccmGbJ/QSU4rDOtGEzP3J9uAjCEwOD0yj8VIFEcKCw5vKUA==","shasum":"02f62eb0976624c42af540201a0ba61ff146fd83","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKXxCRA9TVsSAnZWagAAEq0P/j5v2xGkYBP3/ydLfwOr\nEwaanN3Z11zGedqBTa5F5PBGyaMIqX7BZxEgpRvnrhrvD14ScCtu7cnM9b4S\nkPK/rG2rk5jaIVnlojgW2OzX9ZNb6M1fh1XR+mnK9NbdpCzsXjTHdB0m4vfQ\nunsc76ikPr1zHhEchl1u7oboNKmO1AOQ8FS+W8LECCb9n0gbfJWzgLAhiHDo\na2zvkOzlLp6bZ4kEGnnI230s6PHuNDg5J4WL4wBxrV2fzQadyjdG1csvhOCL\nftqB43tCHkJtxqyPBXwQ7qILJT7/6oT+jj2wKStjmCIcD+1AcPd2FwbUKMOa\n9ViE1ifibIQnmWQcarB4OiENSxpFjjHSWi+MgnYjT4ZCWUgyxHnKquviUxBw\nEWJ9y90dG7a/rajJLd0OWSCvYDJy40BvwgoM4JQTvTAOE745lbD9/F1WrFo3\nsRbKh+mUQr+HIt1vnO6AZIrwCaG7bEh4Jr40UGhkIaZDw+JxI+tKB5eFjLT7\nINShAmhTjYZFjNwqkpRtSJrWdvUdWVwrU4i4ExNCCIwAalpaExutskTqRSZw\ncST6QSCCc0XoPd6jpPyNrzi2yltEhbpwYMXresCtLsz/I/LhSID5WMDVqZXS\n94+aEsvrJYYs/DAcxVWsX3BnYrSsivp6qW/n7YkJH0YkgNLo4DwibVcaczRY\nsJ3h\r\n=vVSy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkxBgOYtmDRAJj1PJjMO3OIW6+i3UrIRu42BiHYDaNIAIgOfo9Ksf0l4MvjZfPzfPevUUDCC4EQISEPufr3lk7KKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.4219bd20.0_1588635120855_0.8760110288985687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-button","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.03dec929e.0","@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-icon":"0.15.0-canary.1d83cf6d.0","@material/mwc-ripple":"0.15.0-canary.1d83cf6d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZLo4261Rg1l4RjKF7qrmwXtcPFJCrEkDPEXk4v8TRW07+qITzTZ32P8TnQ5i01njBSxVNzYuAI6srLB2DirsgA==","shasum":"24886f0c77bb7b86bcc1d55b31dde6857c3b057b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ5pCRA9TVsSAnZWagAA3tcP+gNg7WWdo2kyZA7jVAeN\nJqX2WPLjQRZ2de8o/eQGn766f0tHBM56q7SVBtCHxBZ85b7f8Izz/nEIoZHN\nc3kz6Ssm/HDKobEPbMhmnHfOaoEsXdi9D5aaafttaEX400qO3XI6hfQNa7AU\nZLAaj+ANACVy6VccLeq8zt+w4a3aYCoJFIm2Er+JMdrBfjKl+gswN5j7GGhS\nBqkXBd2ipCwfv1DEUqYrZ3EukHCLQzK5IKLWBt1e5y5OhpMsIvem95d+9rGs\nfY49WgllAj56HHLEcIr57istQ9weDM/EKOQICcrTaA561Wk5k4278mHHpgkt\nidCWhVQNTv/mbxDPh4VmtGG2On4Zg0DLAVK+mWNFh0F8NPw4y6JzL2DziHNa\nzOSrBy8r4HSQPwl3/BwX5zdYtAXqgna/ZL22+9XAZGEA4XeQ54oXg1R+J5d4\n1V0IicE+wY59bkX6Rz3XgOmHwKjIxHO852CV222f/hJFuATUYrxBBuSm4bQd\nOO/SzoHFTu4IeXSQfALCauhgA2MWZjA2qFgRr+cwS4AmFxCIquw6+mtpEQi1\nzk9Y7KEvn7UHzKzHu4DZ/1vM5wXWxoG8moPZulVyZqNj6K0bBDzZqlhOIVgo\nlEDJu6BaltUlC4mYAOByRb8VnlabazeV6AKVyuX4Qr7UcfTE5omciAqw0FNN\n3Ja+\r\n=aWDy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUUKPxBr03IHypzy+0DA2fyoo9xbRZ9LqD6iaC6hJS8AiEAtoSpMUw0cdh3gnSPP6Jdg87sQm7+UZ4jO13TSuJVmf8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.1d83cf6d.0_1588698728941_0.2587925048900417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-button","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-icon":"0.15.0-canary.3bfc63aa.0","@material/mwc-ripple":"0.15.0-canary.3bfc63aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0JQo+bmSlE43zLuWGruvCq6OkxEdpX2Lyh8N+nqnQeZFH15mnvHhGQA8ym6dxmnBl+LANrHTk2cE1zRcMuaedQ==","shasum":"fd8d22bf3bfdd855fa51f25e00f204aafa410a12","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazZCRA9TVsSAnZWagAAjjEQAJiXWrqwFHVc09O0/iZl\nAu7OFEOnT9WvliAl4X5kOfpSD++Nf5Q9e7n+AhoEtl2XB8b8wgEedh8gOR/R\nF+RXS6AYzgsHiNI07JAC9cKavZ6WvhiFTOy2qm6vWyX+xBt2ZVlNpl36z9f8\nkkADWdDkPGMdF5W7Kgrnf0W6+E6xNErH8QMJoftfxGF0JV3HzWbjqQCFp1Yr\nQY3rn4VtEPtG4HnaBqf5waW7b3+T9LkYTGcYK8RssuV/cKiGMD9/00uFBzvt\nAn5C/WwL3rktA9wZS/vDPSVhFO9Y6YcHDU/sccDy5RI6cG0fChR2AOI7CYu2\nWuK+6NX9yhPli/ye/i/aPD7NbBPeZRbp6DWBPDqfyvUb3fyP3OnoHhPcjFU2\nCTdvM1w1HNUiGJQ10Yoye7FwaVbmV8z5/qEzXWOroqAxritWFwNEZPVWUgGQ\nbhMe27BVdP7zmW7S89vVCo/0A5qxUhTxqkN2/+PkqmEW2LaAJyu4DQW5onTh\nR/9sGiRG+13Ioliu7Diupc7ji8fy1i3yA9+Pq/SF2JAaartFb0RQtSfq2TgG\n23IGBjsEoE/i043RoehN5Cye96hjNQpCs+3djEzYOtyzC/KXXg8rBZ1Lkc+W\n4jWyyH6Dngk5NJBwg+z6Oy/IGFUGfYK12QDnWSWlIl56PeJdTVx+8oUsep70\nX7Sm\r\n=Mame\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2NsmIuXiyzaUDEM+ei/182Ziyj2megLkLYG+iNsd+yAiBOmMcaQWrvN+hWVCXGqFzYLgSkAFyocQAZT/idnFf2Zw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0-canary.3bfc63aa.0_1588702424962_0.4104946536382177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-button","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d92d8c93e.0","@material/mwc-base":"^0.15.0","@material/mwc-icon":"^0.15.0","@material/mwc-ripple":"^0.15.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-vwwT5I8b7mMAH4UzGZdfStbWx+/blhBlZ/wZM+CKbolwPuOeMLeTMMawhyRnLqMxedCPExQ1koYoABXNoUB4lQ==","shasum":"8ebe3718f2f23207d60e069c49235a607120012b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.15.0.tgz","fileCount":16,"unpackedSize":78474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepdCRA9TVsSAnZWagAArzcP/3sZGGgvhWdXUOzHFwbm\nOSIkipDfJsahHUKzH6b6+S+BF6Z4HKTsfnwruOvyi7K5UVFvOgrffNHHKwnr\nL5pC40DhRD1OpY+EL6zkZfB871PFM5dWXe22jzjTd6zfHbM29nSaktI+xkjO\n2AEJOns/H7PLRx+fgllKy5yDt5/rqiZyoKNbN5P8fBL12dpgXluF2V804+RX\nmtMXd2GlK4IKGhJylP6XL9OOOK11R1NrldUPFOCJTx4+Hnay9F9a53yJsqgi\nWjwc9LnEBeYGDKK4p1zhMqH0uD15t49Xk7wpweWQCrrIfpYP2l/LGVNhDtxU\ny/8HUc0fyyTMuRUfaDtNwa0C7f0V+noI9gDBCt6A++Sv/3DnqZdb8M0NGq5k\nM7UuE2Y/+u199ClC2eQ9kEQw0ncdwbcN3J9x7UBJTAAn2FVVxOQZHMZ0VRvI\nW4/iTK1M5czyt0LeeBcv2YEDJHtBsybhgW8zfJuC0dGfWeWXgkpKJD5OlCY3\nLlsLYsemHfgN4+4t1LwpnzaWUIeKLfuXV1XSf63fTN9mfQtNJz/MJU6DCbei\nzAA7gky6Sah/cKsk2RaN560ucvLYP3tiU6l6UGTRF4VqCKwXb4Pq6AWAu2C6\nYy77KbWERyq6tzlvPKMhdINq7YwShrWrex3fPHpxvMUjVDG2n+XVAf0tGS5O\nBcou\r\n=aTcL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTtHEGKeQnYJvneBCrzZxfRcp3Cdev34aP2DSUd8j6zgIgPTA6JJHfr6mbQKDnWoHy+1hxsCnMOkmChvkLyHhXXT4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.15.0_1588718173561_0.7498093165721273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-button","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8135cc085.0","@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-icon":"0.16.0-canary.1f4e3d1c.0","@material/mwc-ripple":"0.16.0-canary.1f4e3d1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l17qpBDO0pI2xLJudPq/ZH6dtLhy/0XcJyGE3Rwczexw0OafjAjQWHRT2ncYjgFysd3V1TKZyip784zOceUYsw==","shasum":"f975262defa682309094174777d94a5257a85603","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszRtCRA9TVsSAnZWagAAoBAP/2rnCnrL95YTp4e6Tk7h\nZVKJncjET+XukrrdeOZn1On4yYZP3JIK4iwVB9QbkFft238JZrO9kQyFHgSS\nam89sVo52oU/7muvtnbxqAlnXothQFse5ZSFp22WWbQpUsG1CQV2Fewwf9qH\n9kVUXVMO9nx9EMLctgEX8mm9UEtxFGSJ8Qryns+w3y9YIwnWr2BxTjxij1mt\nJUwZZgXEYcC38MSeHSuCwygzgKGlS1xJz5PBpJbh+dnfmOfMCyG8THJ+bBNb\nqifVDllO+yYYDtwu9kHcuf11AcULWMDmabW0wvvrABxUA1GKY7zN4rvG40p2\nE7EWC1kjjSaiKXCaaSTPT86e6XF1m0d5c4xl/laU5MWrgulBULMAA8904M/9\nEiCL24P2mMnDcVHUaOEwemcV1BWkalVpQjNRhfcSo4s7aPc/zhg+i4js9NjJ\nLGmqRtQd0SCgoasQydn+J2dtetfMcun7RKX30dO2uNGQdpvbU2xYMpdhsNkG\nxEGmv2evsIZxgTVone7m6RiMSXyv7xLVeAPA5DpCKpfSErEf7W5Bx9IjUygW\nnue/X2xiyKuiAgae8CoaZOeUPwOiX99RCi8ha1drLZ0EYEHJDtX8FzONKBXP\niN5T0cR7fx80xDxWX4QrPbYjP/QAyWPoHOWvdj3J7zmK03eEtcQRnX7mPcRm\nwOIJ\r\n=+lDU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF4Av85yI/bT/96G3OWFxB4Zrvw9iqXjGTuXHBTis/tAIgNQqB1JY8sX9C69I2/Wo5uF7jDK0QJc0t3NxEyUBQbbw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.1f4e3d1c.0_1588802668721_0.6841450516728871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-button","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-icon":"0.16.0-canary.bc8759d5.0","@material/mwc-ripple":"0.16.0-canary.bc8759d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Pcqx4WaEUekhkoLBuRGCB3WrQpq5b+LCTrQsUrnetxaH6p05rodPUnxn90kxw9QMlM0a4f9yidOZ8HHNWUEjoQ==","shasum":"4a56c36c9b0eb1e6a1e6cc74c0652d9adb58e41d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":78543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZjCRA9TVsSAnZWagAAnowP/16sPhs0wE9MI/Ebc4iP\nzXgUTYSms43zZYP6jXtB88/q7LESDxoH7PFroTKrticxPWfY0SlMJsfkYPDm\ntnNzzZtkN196jS4t3epLsIFC0RMmha53OCGRtQ23HA19u7oZeu+F+6k4SWbc\npRyHjtFtKSqM5oVntfFcWE3WDlhnH+OHrUXsW5H8YIU+DfHqnBudZ6faSuE6\n25rc0r/oaYT6Tc592ijhpwBfO44SGL0+m/lj3ybm6DACrqK/uS19m1HmPVZU\nI3vRMDvoj2bNAds0SbnZ4QHnEb2Cr5+18ozCxJCGWmUtSnmJMWpaPQzn+6lb\nkgFfnAzzyycKoyzaF8pe8pHf2O1MhI7QK3Byl33rrz5nodM+1CKHM/e4+UTp\nBInpOXLFiPN784Qc357ltiX/X6f4TPeRT8yEfH77/dyXDQCfTw2bUsNDmstZ\nB9MdUUb5nxnWicaB0kV/kF8q9nUhH3SH3YZHUj6eW1zBVfvoRZSRlJlWXaWX\netPGOWEN6I/mEIiRC9p4rDhjNKF+tJXk4SlheHFo1L/NfkYoJ9tjm04kjHTw\nX8TBPB6SvGe2ypKH4YwLwr/1b8vTDMrqG3KqqFrVN+ynCFK/iC72hh5TWblL\ngoIX5ntmdiS/qlx1gMJyLbt37HSRaeV8kkd/SFCBDeWjyuH1tL6dSWNGY7+C\nqL6X\r\n=KvIg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPu/KPdPMwOe7KQ+6I/ZpIy2iVyg+IuQI0bqoCV59BbAiEAlXdHZ07jiP6Li1ds3RMa1KMmmPrZ0koOOYS3s7h/lRU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.bc8759d5.0_1588893282651_0.1540758098267776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-button","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.f83e00898.0","@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-icon":"0.16.0-canary.d1379acf.0","@material/mwc-ripple":"0.16.0-canary.d1379acf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e9wcD7vYodhHCHnzXwxUz8txV4mGIYQBbfQT1T1DUXb8oKVNM89UsFnuG9MzJyFgA3apZk2UReHPKJGkXmsUyw==","shasum":"453d3f00cc97986293fa0992baf884948b148d1c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZm5CRA9TVsSAnZWagAAeTYP+wUIkuwNxg+EcbVh0WBU\n3OhWsA6b2fP3GU0TafV2cVLhKhGwG4lm8agZU2uh6inAgq4CsbqTc/ch8nQr\n674CxP5vxqjkr5G8IFmzUuKG0GRazWwyY1S62LRzK8+4R7Ro/nGWJS5rOEAi\nPwvor8CkDmQ3PlaCEXF1zj+ew7CEi+UD0SAsmR7ZJEkOMgiRagy0D0Ze2coi\nJQ7o0ENJOFqmM7CkGh1wyx5cSDATM+08/ztjeNUVE20BYAcAWFH9Yoi8OMwD\nVETTjFDVnS6wcPSPoiPYvqcKVmaPMPnDwjCbsCQpnsdCKFC48IOutvaM2eh/\nJ0p6bxOiiO0+pkIwwm3uxUjHzUlZW8cZIS7J2sjlPgbTuMTk7utNadTB878g\nlhsRX1zgSQszkdcaKuyVnH3rziUq82sOEeKEetX6aqs9qrvMxtn1AOzAxQgt\n+bM3wXhCZo3CLh/wRfaW/KMklDiafFufT3CLOxKFaqj8OgJ0lFrvBWBZWQD/\nhq80kPpSCL0M5huDESKXLRQH4ZJdWTIfUTvjvFcSye8Q2xanMofbGsrRWUp7\nfcJiFY4uL+mB6jw1I2kFVR5M5OebSXgEF09eH2RI7jUCs9Nqv4fYWYiYhfxh\nw6G/pJTnlbQLMqCz73yn70Qhf9yibZBGsI1si1b/uduKAGUoGyZt3ASZc8mO\nzInr\r\n=pilr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF6oaWhGopo+9C/A00eBNXUr6jhRzNW9J8KQ7gFRHMWAIgP32te4pKOaNnjcCXt+m4krkba5/rY/8RJWBVZqfCof8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.d1379acf.0_1588959673568_0.5508534143722206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-button","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.047e6b337.0","@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-icon":"0.16.0-canary.58d51fc0.0","@material/mwc-ripple":"0.16.0-canary.58d51fc0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Cs+BSZl4ucjU4/W6R/ybLHbLMzy6lagsNSKSfsXsMX/y2tv7/fYRgTWz6ezIW/Hjy6V5kUmXVyuLgeP3QrwlhQ==","shasum":"6564f074c0e338d5fb64c8aea5e82a6f754ff6c4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBLCRA9TVsSAnZWagAAg94QAJ7qnCiTVZrMEc7Ror80\n8kYtNWOcJHZ6AqaaZi73xpYbS5nroz+nX+MYAhjtVAOvWrQwi0HII9qB3JOW\nDJqzUjhBtgNmwkWOI/hoGUxL5Z+mbgsa1KBoiXzjqquzigj7xUi+JR3y/56v\n6MbhEuZx6IHvbg8nL796gLfsuhLD84ARO356nKu/PSlIUI3ICs/oN73wybJJ\nAFjlTE+t931y/bK3a3+muKBKTei1EmkkXMHE3J+W9TUeWybA2l6lzYm+LNY4\nT6aJdTjMbS7xyQjD8PGTBblggUoJkPTp9Yb5JIDtAT5wnEqnUGjaBd6mKyed\nMkeJsP7bS53dZkEfLSy+5ZBsbWc6k1Uyt2co4//lmohrFQxlrx1w++td1Kd9\n831NlfCXCqZNwIm+c4jfzAY71TDMyA4lzeWXgq/B3a4tyOH5fIdiTfbsGcpi\nRXACQ+ImvJBQ4IhPf8dbBCxO108aAC6yPx/FdONiFiCOdV8t751gk6Xv2ozw\nGjweZ2BcK5J3Ep4T7iE22IpVp1LH2ZeJg+TQE0PKPbBoJFF6P4BQ+GOadYtW\nnBnsA2V856D2rhUEtR9DH+wPKxffCrcqWv2CXFmdKjKeFjnwp6+ykJ/94iM0\nmLT61okKvqQ2t26vY5xqfGsw6gRVBIs4zNEGnt0neatay+OLQOLYkylZhq7i\nGOG+\r\n=KrHy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/bpQ7aol54pgzopUTjq9LimcTAEv+bxTEdlT6pMZ+VQIhAJFb93jHNZaUTXU074oB1ct8v/1g1r4AtCddGCw0SY0f"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.58d51fc0.0_1588965451522_0.7481527136495891"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-button","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.119e21426.0","@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-icon":"0.16.0-canary.588062d7.0","@material/mwc-ripple":"0.16.0-canary.588062d7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1VKdDq+KJJDyOtxEbXJ7ynUNbicTFvyNekZh7rXKkx1X/QYRNhI01mlPzcE5hx8fkPJZn5IXdmxAPMYosJxJPQ==","shasum":"be049c68fef2aa333efe7999f92b06efa11480fd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3gCRA9TVsSAnZWagAAB2wP/04OR7SQDzLZEV/io31v\nrj5iVxbdeMuYU5ncG4i/ygICJqwSDh6kSq6QCv9Uf9z587cr/RGTwdhgwKDL\n7iMTMFL0wXuWxKxmMgosQwGmVzkbTCiRi0yFgAm8z4PHPxdOEPIBl2VKGsku\nxe+jQvESz2x6tTv2BYXv+Z7bKavAo3/l3K/X9S7zIPYcToL1ZyTaHRuPFtSh\nBfjPtlQB87AWLxCiiGy7xQq/MW7P7jwgTf3MiMI62pVIvtQGw6xf61tdd/ng\nJQmKEOdEQTeTlgnZihIHnhovDQskcqrrq1PENJzhH6H0k1AG2EgX36qz4aBJ\n7EAd335gI+3uFYdyQwRzrmpYAZWb4x57xpBR4ImytIVS+gsFLm7d6v/eKKxy\nj00mei6eyMBjQYAAe35Zvj/KuTIbu1CDvhsBkAfpdrKIj3l9lFUtF1xfG3uY\n+SeD8Njt6OgBZdPtlC7Vupqz8xxOupLOwjlGHLm74iyMQTJ3bPga64gDQ8UP\nVWDv9zwnX2SAmasQ8lPSfgLUt7AmfjfiA1xXlQkzXofx/qTdjomyp8MKWbc9\nOH8uvSHXdnCpow5l73ui84c0326WKKnx7QRcWp0Ifl3J0NDZYTUOahh4hcX3\nNA1hf9tuFwCHBYMRQbW0E8eHRAZrUAgpzcY2YVi6RqJt1ftzT7hPC3jGvZ2s\nEaov\r\n=knLP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUu9sKi1n7mzcdUZdop5jfwiFhDcDJezYKPLaCwT5TBAiEAuUfbob1Zdj4nJ1SSr4oxzLvDH6+Br6c9OjVyYyiifmU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.588062d7.0_1588973023723_0.5320094237723683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-button","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-icon":"0.16.0-canary.fa21f639.0","@material/mwc-ripple":"0.16.0-canary.fa21f639.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aq3VX0oMsFwjzdQ2s1RK0xldU9IoPnQJ/ij/yZ+gy3k7dnscaGFkzGbxiygcH3t6lNdxu04j3KQEeZLBr9jwZQ==","shasum":"1f2273c5d69f4e38f515becf649415ed8b8a16f4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYucCRA9TVsSAnZWagAAcMEP/jVxBgzF6sAFdWSBsrMy\nDRHXAvEiNyPV7oGZ1EE0ap2c7OZO2fofCNGaRLnRhU4zcUKexJPbJxJAJOcW\n6/MwpLC7nNUTO3TaARbzDYxtcr/MoXxeX9wlwBiyYyENEgcHuR9W0TeWPZJH\nUMdxzDE1SyX/KafsK0tPgzW7/Fxn6tAy5iqyJLN6CJ0qZh/6YXL5+N6lbxvd\n8iKFLVE8Xqv6bM46PsPAD83UwblbKMa5sKtuLls3GpFrWT9Gfebs7Gh/XsBs\nka4CpDmbbWxyFIfFwbNE3J5dwazKfOUDl42fnPBSvzFuEvi5d8RMuNUa3iex\noykS79P1w4KLq42BtBZETh9XeCRFn3UZPivZ5x9sARtV01km0k0Ub2WuSQ+v\nod0oXmYSOJR3Q2iSjbw2b//w4BWZZp1c/+osBxXKv+EZN39nFlPuSEQBBXv8\nHrjmfUUG53u4NPW3EafVyR0vP3CHA26U0KyajwxkY4rgz25HkzRSHkFBPvAn\nAZsODtKB/CQOHGY+Xs6gSzdldTV/cCNE/m3vvL3WhgZHx+QgXNuqEqENd1qy\n+KoR0q7qrOfxd6upjG/RTq+NSyj9SqGgWDyAXjs2MAN1anHzlP/4ioo+h0Re\nH8bSVC39EX/QOmwNZ8w00U6Auf3Qnrfa6iVlHzxvsczVoHjxaGS0cP13rYr3\n78LC\r\n=PKg+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClchPSurScYsSXliH4BHHmqCsS6tPkC9hGshthNQg9XwIgL21ePjactt2PAQ8P1TADFeWszJ6AfVTy296LAGB5o/4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.fa21f639.0_1589218203701_0.8762739717755053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-button","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-icon":"0.16.0-canary.2772c509.0","@material/mwc-ripple":"0.16.0-canary.2772c509.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PH1urh5Rh34B0BiT7toNU6kPCeBLtAqFo0l913ZH6OBSs99pIm+vP1to5jr6wW7tD4iPvSzVQDgJOs2wm+L9Dg==","shasum":"bda05bb4d6fb896f7b093bc4b6060b7224a5c31d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZs3CRA9TVsSAnZWagAAUoIP/Ah72wWFsb3+Q2lX36h/\nb6w2md49zh46VwKC7RgcgHUCL15c2s7Kb4EwwGcVKMNUzaodTTH2ew1a/P04\nbsZrcmXHsF2HKWzppr4dokLZrzHRWC0J9yLZfoEVmQTYQ7aZj8PkwBVmPvut\nTsLVkmoh6eRTd3urQ9lirI1FOV2DdBUclOtQ9a/sV3yPvybfI45CBoClt2Tm\nweYsvuzREa0jIvucz8GPa/dy7sTIPX0gPmaf4T3KY58aUIcQ5tDgQqVJEYda\nzcGOGCZSLKSFbgP5eFbRso0ByAK96j/ZLM1Kx1ABnq4jZTfLr78SoKhCAfXA\n+Vj/5z4GOOynBbfHifJI0kIZkTDk1zWYK6WB6dDuWwnIho0X0PgdiJxnZ7W9\ny0JB+nejvCTw2NN+UBLyvVYZjnC0h7fYylCAI24G1v3cGhY73wyKy0fyCUtl\nUNe5aTqzCH8wUG/awoKZUkY9iVx9W0JL2X9LWiyeFVX28i/8dSPWlzRq84m3\nqHwwKoFqtvp8tDHgLsQtdtkI7wuOdsGC2dPTN/Dedlky5ZR02Oig61WN5AOu\nAZUhgguMmUFV3m6vsXYZo7Odyq+SJGMMfsrwXFyAOkgahiZZBXEJAsVgQMV6\notaGOhHR2SqJNPgRGxa2IndiTDaL4N1vVVJ6KjFsERlHmHHyNemAB6AkV/u7\ncJmD\r\n=wUmk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXjdp0nvd/YYrhVgZH2evvQ//I7OlrE4KInY7I1Jkh6QIhAJFWGGEFLK1M+L/I05kGbelw3vFeC8pILkxsopABTHfx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.2772c509.0_1589222198805_0.36493815730743173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-button","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.a5aeb3001.0","@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-icon":"0.16.0-canary.fc4796d5.0","@material/mwc-ripple":"0.16.0-canary.fc4796d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZB1wwoJNfL00BZYt5IYZqkwd4SEhC8C1P2esgD9EVWygwWVeB9pVNJdxa9XQC04kHkdl210XraIZyOlNlvbDbQ==","shasum":"45f5bfafe5d8d2009a04e3e6221b1fc054d4336b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeua/5CRA9TVsSAnZWagAAx2UQAJgm/LhN+lbLCJEcQlZn\ngjLO6Zhk47CVE5bP45WnJ5ybgMyv96zoY5Cyx8iVwd00FjqMN9zjYPNs2wOJ\nnERl4BTSfGYAjCWbPozS+oyJ6AaosotWvgEerq81y6nWsi9i00lVI0Hi1CXQ\nT3zoA7gSHCCOYMHvmTxLZ2l4544sGJPrkiLMcI+uNtHN7tzQTApo4l5Kc0QN\nasqET4PWOFGX3/HOYKGT8pUx/L9b3tY9JxJkBnuWeHHaKt7A2FGJmad7b6zY\nu7S7eycZi5O9TLlH75t+1VmamREB5tL+zEhM6zXJ2LobuVwQnYbHq2kMH8uM\nRo3rysiOZ+mBR2/B/dxAL4zp2iv+PQ3e/JFcjAMVZEzRFV0Y0DaA3Tzes3GH\n2g1ehAg9w+wUG8KH2qxTBxZgVHZFszdkAcSu45WRAppmdNZTV6kzHiVBFagP\nmv932V5IlvGlgi3mzZEXXz4HRo0vjsGR3l5FtZibTrwZijnkAaZXif4QGKDo\nzWUTtzFVPCpyhV9h5VIV1jjGpwOLhco1FgFSE1pGsEAF1XnLYi9VezywXxip\nu5568K4ZpiaFsMZT87YwSGZ7zxbmeL2YrxtS7cYWqTD7VUr5RU2np+q3QRd/\niBVa16EePkM4aiVI1qplIVgzuE7PTVSwH0z28IYk2PJovoH+EdQYbjlLVF0Y\nxsQO\r\n=CCiI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG07NksP6naCh4ktXQUrr+nW7j/ul6HcKiTAKdDq3z02AiAdM1TaaEQPF4vsAbs6DIbxN4RHvefJuZ1/g9VWtx0l0g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.fc4796d5.0_1589227512821_0.8983669859223546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-button","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.ed52af767.0","@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-icon":"0.16.0-canary.0d1c5f2c.0","@material/mwc-ripple":"0.16.0-canary.0d1c5f2c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yrx82Us9Z9Ka5eXfhjhIU+IBEjuaKYnIzWybXY1+qd9MXeSqeVpNKCKR1Bvc8jB+l93YZ7OnEskJD+Q99/JnOw==","shasum":"df95a73e953febd45626d98e907a36b5f15506bd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucF1CRA9TVsSAnZWagAAxqIQAIR9lRy3QeQbEdrMw0Hl\nzXRm2Ii4Pif+BFZr3YJxe8qlmKoltoHKNbid31Ut9bGTrv7P8evbM0sz+Typ\nNXQAtY3Tgs9ROMXgHHUPnSpB2OGmfwEtLYss6mnn3wtK5qJPBxOwh5E6JH0I\nYEUBqr7QnhmkM+Y/jSloPIHUttEK86hCeAk9Ae0Ud4pIxr85WE8APnZhxump\nLaQ/iCxf8cFJAjVvhrb0h0+Ip0ve33UA9lMv7vAHtn2yJFmRbI7uTcYD5All\nqYty/CJwZRvIjvDutU1LLwevDP1MpPKWB3WpmpN3sC3ZY5Vs1lFxTP2UoS49\ncvVg3GVkUkIDLJleeMR58w3wAPBIL0m/kmsuVURyNqtljzTet+6ELhaPKBzu\n8DKdiq6mRFydsgGTJEF1hjqcFE1SgZcXA3Kb9iyRB+0nF7baJR87O6L/jyhG\nqXu1lpAWaMdQXSxT3V1IgDowkr4vuAMKpHRKrfdWXfYvuh2qunCRHmMG409N\nRCsdEQbQCGI+sViueHiIxvfQCMehJssan+WsUg8wm8rX99PQ6aq7Uolncwy8\nByPE+cVVz1q1mNmHg0IbVhQAkuo69SWajVq/BXOpEh3GPy/R7hWEL84FQhJH\n2yPn46BoV5xazjQTJSXBVWVXqGCjKV3L/U5V/SQFLDDjr/8mfSZhV9KvnUSR\nAwpd\r\n=cfaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVG1F53eW/T7LHk9eaJwyMtzGqYh7dFebYKpGGi1fvqAiEAyrNpa+FxXwjXZenrYXttgHvq+ow0zEGgHmlqD3/CJig="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.0d1c5f2c.0_1589231988640_0.5150129748366987"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-button","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-icon":"0.16.0-canary.d083d93a.0","@material/mwc-ripple":"0.16.0-canary.d083d93a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8aJt7iHK7SpaEaR1cMgVHLSg8Pgg7LhF04Ih9N3EhBJalurSaOTS3AWa1tcoD/dS3b578l2vjaFuO0/MIZ2HZw==","shasum":"d5bc9c3d5e958b66ea1fa01f58d1695e5b88bd60","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetJCRA9TVsSAnZWagAArFAQAJG6ac5qctSM9fsyhi8g\npRwVQYH9pUTcT0ALibfDcdsI/wubBP6mARDIN7DrL0RS8pkeke844qMeHimx\nAfg4UpQ4byy6HpcDaDe5awmLGA0drud/X1JrZ8UR/OK+rPYUwNKVceUrItF0\nlQP1G9j9zQqBRuUUXSvweStU+Na2TDJsNF6BM07lqvY6BBBzVV5UE0tjVq6v\nG+GUfb8L6TJBrJBAFA85VXFqawsz24GrGxFmYsZMRNdbyPtv5n4U5UGfvygT\nsh/8f78KgktpSgjIVuxTYFB8CBON6uoZpFeX8REbBzBhCuv2ihByXnGAsZvO\n7RiQJQCHHVex//b/zuNFxUB9vQTvuZDWuNfH6UA6tPMwMUYlrcxZqYl1HFMT\ntR44rfk+i0/XRAWDwz65OxQfjmn47MSKK9pss0D+W1lZzoRJfCnArkXXPhoZ\nZtQSlm4zTtHSDjTMyF+i2r7Oic/PZc2g1eRAXL1Kl3txAQZOTXkEzuCEXx9G\nu6F8eS9iz5irRjeSTcaSFERA2qXa/Bdw4AT6Hed/mgPq8grOZIDLH4eiH+wS\nHFJSpl2Cn8ydFQeA9x9Pg/gQJS/MT81u5rCTF936VQF26MbdHmP6cIcTXqst\n3kiwFQLfB35L1BiYgnBOViVfWLWEhaGLN4ZeedbE6VJYi3VwJObNCg2MzyLo\nerSI\r\n=Y3z+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYWkH7VJmrNEKwo3fOzVyK1eMMSZSOIWhbWt2Ds1qiogIhAO+fWlbvg0XpnjqT1Ol6vGIX7zABtq9P1M3V4koEzcu9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.d083d93a.0_1589242696788_0.9737068254452281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-button","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.058cfd23c.0","@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-icon":"0.16.0-canary.c95d429c.0","@material/mwc-ripple":"0.16.0-canary.c95d429c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CWKNUnLmAU7bfNgIHPF2ilcGpBN3fPOzolOHNFoRTnDsi+HcjtUC3ei6uQ89FmsXOnQug3ygxECDvuUoi90xvQ==","shasum":"3d43d99d27c1259cb0026a138d24335f2664bb45","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxb6CRA9TVsSAnZWagAAcMQP+wWxvjIEF0lVDQfmqOjg\nMRtFiDyyoNZN5XnjiiDzTb+pMC6jRzqIg64kk9UPnJ1Ay82338XyB0lTbv95\nU48oJTy7eImvNh7Qih8vc53bAIYFj3mLlHyLc3LT8jBlzt535kCu0v4BahsQ\nK5OCIaM00+bdR1G7kIRXOwj6T6M8nIzhYe0iWfs91pipT5fQ0CdG5zl202Le\nOWU8qQgNxpLFcN4IChB3vFa+o7Vc/3enqhI2ZI1gmQFg5NMW8+TV7kgqy67p\nz2oPaNpRwUJG4WAIv3n69algMqAF3ZgXmGhkyyzjk3R1n8SqU0P4C7XOmRbX\nuDcHIgePHpyTEbSu8mmNgFpU4PGm6+uIzn2odpzTJ+JroCGwPHsujtB4X+Cl\nioM0WIvBjxbX6cMMsuQ5xv/ovFiLNf4UseYAkKG7EioxJUy5i9u1t8mujcCm\nXpgJczKtFCuFYAOnljRQaXEDNVHBYuqRlL9eIQisQxfDQZVDwPIat4bXILHW\n0KiTpYHXmq8Kr25XC9ewePxoBqjeHM27mUoBDJIwVCBLM4GMoOys3+I2Id4k\na+uNfwXZw66AWQZAokGODPLIk6xl3s0+7N2GKSSAOP3ZCBpi0wGZK6y9XjfQ\n+18VOwxFDTGI0Fbb2N1no7nyiNQaedSkCjPutm/YOJQiw4p+fMxa8M7ahGo6\n6YiM\r\n=3kKQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwoGqdlCSrEUP29GZ8wyQdLG2IRqbiUq1nPHxN4dVKhAiEAoMl04kcAXaABqbWDar/e32JkPmnCqJz/22T1T08WK+Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.c95d429c.0_1589319417844_0.4038879554341974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-button","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.0a371b4fe.0","@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-icon":"0.16.0-canary.0c1ad726.0","@material/mwc-ripple":"0.16.0-canary.0c1ad726.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-o5VdnzgWPk4X9GYQT86WFH/OtcWwqKC8hO9EO/aWhQ+mLKtOUiveyz+0FFvkUnUpyYsnZqvOiYWnIWBCzc7vRg==","shasum":"a06644eab44ddfbfede6ff946c4579964b5f9271","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CGCRA9TVsSAnZWagAAiCgQAJ0rKh6y9xg57zl4X9DK\npa+SB5t17h8CwKB++ou1tGLgp9vxZI4htBMVV6AyOt++33+yAGB6U5qWmd0q\nxMYsgJGxEXlahY+cpcgCHf+7DyXjx51z6tMA7RsOLMSV+RXsXvEHI3Wa7Zmf\nfmkZhsPSXPKxVRRAk+9+VhIDByq+1UQ7Shbrigp34d+joGT9QRTC3gTF94lV\ncWm4MYPDf/h20V1X6xHwJBLqjlkLcqYfmdJDFnQ/1huIZDzjUxKBC+je87Ja\nOLLbkq3MR7psGEIGSdRNtShs+xhELGJ3XiTnF2jk44EW/9rqOoFV8WSbcmIK\nm7Zk+UIg4tAsHikRQXtFQvyRgetN7lVDtgwVhwkJ50vATiGA0lsLJzKoAArF\nvigOx2+qu/AJE+4U+pxhGwbMARrxSeKMSBkQc9WVrbKnYkwfiKwcITJNun4H\n6N9m/nwXJKL5JllwgN/+0wZIZqyZ2X+NQ6dBQcW0w9DiZcF7uNS2Hv55MoLg\n+fYzUuUyLpEguwJ088YdJh4PO6X6rIVbvy7R+F8HPCnDoNOqfGXxCMOw1ReI\n7ax1wiLSET5K3yQZ5Tgy/N26FHbD4xRXxUOOwAKEeYOWADVrMTXMvQRZ6NMA\nbrKUl4DeZd0GX0ZuF68WpnxQXosaw4OVqGtEbZorrtwQS7iZDlAj/vUkucK/\n6Khi\r\n=k1+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFF23MD7HPz8KBOTHk1Bx2qmaY11ucnLgx+WtBaDwQ2sAiBbP35CpM7fDqcwzDusJXs5WCw8rzxxeXvbwWS35w16Ig=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.0c1ad726.0_1589330054205_0.05407183714378827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-button","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-icon":"0.16.0-canary.8b6a4700.0","@material/mwc-ripple":"0.16.0-canary.8b6a4700.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FWKUU0e86qxgCB3dJgIzHxYH6og2IfWk+y68IWdmwDHjuxql74deOSd91/Lidkc3gtonDOfjaTsgXlFlzrlD0g==","shasum":"697c1ebca0fbfc7dd6d5da7e63155e4532b2b810","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwdCRA9TVsSAnZWagAAhqcP/3279iPsnMHlBCrZLUc7\n7u3FEnqgSz8iJRW+R1UKYHzQkDti8G0XRtl5Qlv1Wu1dHVdfEHIdTmYWdBGK\nI83udgRkNSfkLNmV/X09W7jMW+uFIVl1537Rd4mjvhwj6YosUyG4bE3UjQDf\nwI2f8kkSeeWK3mUkUx5Yb90LmDKJomNv8/269gzQ2GMr7R7Av84yD80mZOMR\ne2ZKAm3zp3VKl5zITWT7Cz6rCzzPM7i3YhS1+zrJUVkWt/Lp869rYv5rXhfa\npr5iNaE0ulPpevMYgf+mfTwThRA2DoJXrOZy2B5+Bdn+LmDZ62pu+hY7PgtP\nA+4Kdfy/etWohLzzwkmnlvTo7Pcgqj/sMofjvNJmYVx9yEEN9X16eD85aCuG\nCgLyiVkZEOBh9zBxfogzNO+z91VJPWvtC6sisQpSx0fXowb01uq3kWBpk4p5\nE4QbD6GRmu6lDaCxgJHeAWnD/Was7czUCRYrky/3EabZL8/4wZmETMJNlpoy\nQ4TbupT7EC6LJS5QEOfdKV0Iy75GlO6WOt9dcHJODM8KmlXMrvigSk1IKQMv\nssHbPunCqWgFZPBQd3tvpGQuh5K3ooLEotxfczjXgBjJPNBtJmlHM/cXr7KJ\nMGg8a2/Jl7N6xe3ivZqXZNsxdk58d3bblVNmS5Ak05g4hVz74Ktg9YCAWA63\nVosb\r\n=BwPT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQX28EvTAntyFuaQdeavOPpU0Ih+F+Ezjek5A5Hfa38AIgEi81d0R7c0JENOtGCpjHjPCQ4jmjAGdrVnu9aJH9C0U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.8b6a4700.0_1589390365343_0.06581860249929683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-button","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-icon":"0.16.0-canary.3270effb.0","@material/mwc-ripple":"0.16.0-canary.3270effb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-M3DCEqafDXnZH9pPrgOB78duA1/TCrxQfktETnUpzOFm57fQq0If/MlRROC6Be7R29pjCKA/3QGhbgy5tjMVDg==","shasum":"876403225c23ae7244a8f0fd0d2d430faf987b5e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWXCRA9TVsSAnZWagAAti4P/Ao2ALDyxblXx6GidM9c\nTXXg7ZqoQPvyCob6iyL/fjSudHy4Xd3/Sywjp1AcebKOY0BA/ykH7n6l2jWm\nGCKgDJUFLfILR0WN2HR/+w7u23IHf+I0uydPeMeuCWirvyzg4KO3kcgtb0UP\nbdH+eVzm01Yse5xLo5mlv/AUFX3BQDGK6h45np8JSSwvyV91176rvTmEhQL3\nXMTDOp8aRzVRlhjoqyZdgRSD8ki8ZGyV/Bh2Ra+T6ywVZOozqv1OMo4fzsKf\nN9CHWE0h0NiqwMbyER/+75dAH7zRMxm0rlrOgriBwgHxXxxDwhBMLgrprxnV\nCJd7yZzWG4XpjlBqm21l9cNUNAeqdpHEaCW/KO+5xrCO+e/cmxnlX/qgNRti\nuP3DhdcNISYzzV72ydBZNOsewyAuICNTpswzPIF+upwWHuK5LVvC+Xe52lfp\nOnOZet2SCASL0IJlk7FN5PHM6aZHDlcRPBq1SxKqyEiq1WIb2PSw1cL6Xo9O\nZxtkLFae83gFW3zDueJdkjFsDBUO/NzMhRd1OyWBPIC1V0vldnr1fWmll0xa\nyoZ50F/Uli2rPHDUx1b4wUA0SUCFkUbMQujHSqfLQyO0t9SP+NbvoVswx+xu\nmn16P+fMQ0+VNzP3joR5+aw1qh9MK3ocW0vFbpqEmsSGLx1gbbfFtS7U0tqQ\n/GDU\r\n=9bgU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzybkuQNfXcyqhc5/2Kx5fBV/Yvg/7YxrezOYEP/fHPAiA2A+KeS14e44z4K9FrhVFt+pHpLBTSR+6q9LPFd4Y/Zw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.3270effb.0_1589405079027_0.36188520925107515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-button","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-icon":"0.16.0-canary.832e64f7.0","@material/mwc-ripple":"0.16.0-canary.832e64f7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yAy12D+A6XINnfq/mpwdUXYywDrjK5khzypbFLCe6fCfn21r7/iMPJ817fIXZJyqGUDQJDPnO4Pgn26BasprMg==","shasum":"a3464651c4e0393e6bb8b790e68f4f076e24afd3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJY7CRA9TVsSAnZWagAAL/sP/imTP/u08aOxHoa3udq0\nvW7nwak26NKZAsaCXYej+T8lUxIIj4hRNPDUm3vRML29NPKqrF8taTXMIf9x\nkIlDXp8g0udLjELS6ASp8TtkonMeJP4HsxeNJfFL9ev6Z69WzMdv3uOuLhGn\nfWd5b0xPaL2zK5XPHm3rVH4cGIBMH0CYOHLnE0PPoZnSuoIxoXhikEKZd6aK\nsUq0HH0U7QV3HvQNR42LxO4/orjS4Sgfu+nLj/ezJYBDfF+fOP5wV1ichJx4\nqt+j82IKeW5jpYJthUQYBWeM5ylfk4BjDk+7CVuuyzOAqGczgGm4vASnvRXg\nLHDY4kEz5/eyXhk3ACeYvc1H0VJSU1symqwPfv7IAy+TvCFzHbsIqpwg/o7d\neSFeqPn6531P/ntv2r+nfTNGrf8Bvk9ys/YiXeWJ/+zyF7Cm0jichEEU9JMn\nzhHJO01Uc3NREYHRtdJnjAD2Y8QGH6Z7RHCioHxn4tnwcOBN0imRjoVLM5ZA\nvb0B3m7L3lvRTWOhqRnllCLtyEYTB49IToK3wx141GmltVqzdeqhc+oooDMg\n+wWhvIqSE5BJiuJWywzjHNZ+0TlOXq+g2su7vwD9XwPAGDPqyElek9QCbwOz\nK1oH10BMUaV6c1BR3CfRENLfDR5XCndajxT/9grJ1sQxk1zFOTuthpCEMhLr\nQebh\r\n=qjQI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNzL/oDBR+cUexQoy78yrMJrJyitxJobNkYC14mo3+kAiBZTbuY9PbCSd7eohw5pmOMUTWrNzBg8dQv0KoW3CJYbw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.832e64f7.0_1589417531173_0.7076375604469505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-button","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.2139200b3.0","@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-icon":"0.16.0-canary.472fc4fc.0","@material/mwc-ripple":"0.16.0-canary.472fc4fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mwpnn4SXiRslUN/NRB0dzyqpmtqi2BAWytiNxvBXWidNEO84PcpIoV9Scw6/3VYfBRHDz82M5xISepDxpYx4ng==","shasum":"cb6398cac85d1f33d50a537f44b570050d2bd72d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLy1CRA9TVsSAnZWagAAJqcQAIjPKnh96eh8ayoRc4hA\nZgoZFgoG+ob5Iyi7bv7x6w6Ny6driQBoOsFKICsfabmb0KvzJ4HUkM+Pvfi7\n4l8ntt9YkN12f+xauuuFYLMGhddR7SgXVLg1SxHWfZmrkPsjIfdr9VWuNupX\n3muK+yT41wI1ErhnKRg29+BBT6rpq7SzC9JVuoMbx/AVseQ5Jq9R31lJqcWY\n5QFZBncT1MSGoZGQLdeyETRuKTZ9mAdQjYLuIw6NnRXdyWxJoOl3fXwRv/iv\nTzbvuGOxodlfix+nuTQXwinJxOPtPPgav9YFAQRvZBwYIN8CUhIX1ZQqBue9\nWd9C4m4MTuY40pUrkguzeHURZKiHgFXbMdw5bA8ym/ntVmBhQziPom7JbttM\naoORU0dsU6KzYsB1GjViOxWekvPblb7y1Ik0kZurJo2mJs7jdlag9r84kcb1\nY+DQID4a1FTBtezJheVBMXHK6GEzwIhaMrEdQSjechfGgIha/AxTTd4tI0s4\nXHxT5xUYALW8X8I1Yv2knMDZ0RW2MapPs0HaSpgyUqWdZZPYX1N+sl3zohiU\nk5Zv2yTB5i9OQMINX5BgtOZN6sUTbE8uuKPXB8iS/+3ax0TaLFldESeSsHbp\nmMmsO2D2YTrFFGZMGU5/17m7zXWlrRvSdymI+ox2b5ke7v5aqANbego0Jrhu\nJLxH\r\n=njmt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhvalXm7TJqFoSqyDh9Mg8qMK42mvjG7N960rtBuu4LAiEA+M4uNjHMYRXasc9n1Y2I0npWKh/SHj95JqKrP9cFjo4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.472fc4fc.0_1589427381542_0.5349245680563546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-button","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-icon":"0.16.0-canary.4dcd7dd5.0","@material/mwc-ripple":"0.16.0-canary.4dcd7dd5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tT0zIca9NBTEeqtOossoemXtctPEideVikvtIC244ytq0I9ZO6fZ3mIBdNo0mb3X1JK5dHTKrPLtu07ek3Eupw==","shasum":"8776dc1d96673090db791265d0d1299ab024732b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDQCRA9TVsSAnZWagAAa7IP/iTjUo81v9regkKDNcnI\nb0ly+3XZKNxXPwSkDeiH5kVzq1EDxwKwzFiitTq2k38QY8iDLbrMKoV1Gvyx\nCqoPi1Xu87uhFRfVBtfkot/+EtJg+wIxHmw9BKc8waMNwqlv0js4ICAjHdLe\n3WdtSFIN/I1vu2W5W0hpVlG93wADutbK22GI0yWiqY209uayY7r/ipm2GYJV\nv9Sg8wXyWtfwu9mD428MISS8/9jTTkAUvtmKi0g/pE2/xKhSAeGj2AT1lncD\ny6lRnUFSMt06Utj4gdFIdsdE/h6mSsh4prum/ZHGvmJSFKwkdoLORCwOfqn9\n1vD++y4HF3T6RkV1qNgMUs01709O9GjLACdoKIFbe7cgZqmrXE+d7gA1zpGU\nDvLKS0MzvVnTeLkJdw2CS6QxFjIHBT8YkQ2PTunWBpBiMp/4CXHj9IjE5HQr\nC0odg1BiC37T7c3BR0hdvFBEbeNGALiPpFeuqhP/73J4vKYQme7QJEPhfzjA\nEPGEO0Q12dJLuAPVZfZs3p7FSxSlWh1LYv/7kzj43MI5j8oYYlSwDmDLVaoZ\nWjKd2N+i0Y4fl6VCJAochK88Ogc4ntaEUkV3PntqbTMyJFh1x6gCzzSDRu9j\n42I/2h7RF1vbzWQnxQF0Yz/NH3wec1egGYIRhB7ssHp1h2xSzelnUXyYgNVb\ngCt7\r\n=5kY0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTbLPV47M16hNDChBe5NTFs3vezlHGJTL01rBM1hpUjwIhAKU6F3Q6M1wSrccVsZr5urCGaiXeXsC2MWYqzNfOgvA+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.4dcd7dd5.0_1589473488075_0.6405302241829247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-button","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-icon":"0.16.0-canary.bcd3400d.0","@material/mwc-ripple":"0.16.0-canary.bcd3400d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CgKYQVA95rJ31WNBaoKpbWXfyAPkDBMbyKGosIa1xmkUKvaQg9PxtzlRMMqZB7enJWa685hc94G3x3IQV8G4Iw==","shasum":"c597fc336ff7a228f2f2f05a6d828626daab599c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxyOCRA9TVsSAnZWagAAMgkP/RaIDDjtnHZIfXncsITT\nz3Ymb2iEJlhvij7B1FNmJxTq9HfQWUJTDDtvZHnVGURyOunpnusf0TYjqHVV\nZN4Ap0K8mztsnalerUtOFCRTIvw1uCUM98wbRugQvqSNysSBSIFwpn6uWEnM\nvBxtV1TithtCpVW/OKkMgqA7Ndnqic2zWv2j+C09l3pkQqVl1LOB+CLDFKox\nTfzDlPqaj3HB3DJ00sxaNT23/Qpkifkh9V9oLQvGnF6Nc3OMwS+8YL7kyGsQ\nfYiNtpnBA7vME91oNkmW3GswhYdDQDO7Qjn//xGwHtZBS7MPcDNfqCbuxROR\n9QnewkSoQoBG2L5AGi9yMBK4V1ybPVbKkUic3z+7Fo0hd57RkARDTTcpBfbH\n3+NFMo5CN367AajmCcZh5lQujPodVp3gCtUXTMgGyBTjxDHk39U1paH2Ziqq\nBPMMW++Z+b1g5ArUt6Da5XOGoNbk7PMfKJYCMd9rx4drRMK8Tpsny13twRq/\nRke56hEEoiODyyX+K7QVZvijmBoSs8l/sqKlYeYYYSaaqHd0rT/jfxaxCr/K\nzpGBzeW6Tz3Gq7iK/aCC9vVD8MB2+Uk0ivo5V5QEJuUWzR+u7mGCnl13S4KX\ncUFBXCVe2rZ6ZmkSELLNBactHa2bzG+AYrjg9SrxfaiZ1m3WgrIAv28WiZ+U\nHDaa\r\n=DNtP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZsHlTMa3K/H2kbWhqOWFXOYAvof31IaqqSTuVRrgO8AiEA/Wo6s3oAQnhFS3OZxhDm+/Ps0k/iDaK8iixBRstFARo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.bcd3400d.0_1589582990219_0.3182538582134862"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-button","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.ad0c0c103.0","@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-icon":"0.16.0-canary.91f63179.0","@material/mwc-ripple":"0.16.0-canary.91f63179.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-00YMZqlhFprtersATrOJmJt23wn6efjdLCRIWAQoihpbktCdcA9pcqDYtTfbGsxJTkHNm5vyuk0p2AI//NSNTw==","shasum":"b403acdf656f2239d26497957e15d01ccc1a5c3b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUZCRA9TVsSAnZWagAA+x8P/jf6GF0KKhR7jaRIifqq\noxkmx7k1PYjbOTAjpZGxYwOeQm/xXNq0j0APbSd53F6qMhV2Reo+HMtEB+Jm\n/FmUCLl2MVp2Th/OcTdvgiVaTw/eAB/9aMZh0aojEVTLC6ExkPnCrXMeH75M\nWZRO1/x1QvgRg4TdC12JpZYCpIalCAzFmU4e68yaIfOpE5k2CSsupj0+mT58\n9gmQTjuouwNWWCOtTec8+/ZlwIDV7LAo2OfB5fnFVhPzmboTYU7OBnBj9hrt\nwlIJR+yC0A5OYRof/WueVxKcq94HrDPyjyHbEmFIAjbizFZGaVzX22IpSQVp\nMV6wMo19vZ2t6SzocusDOAco6lqCLLpzSWx59NjGKAjG57M+HsnVbd34Elhi\nZ5Pe3za/aaqP8dMzKErPf6i+x6kRifa/BvaC6nTh4Oh95D50ZEGmrQNR4N4/\nFVpTPVS+b5a8EuXRZyLUiUbnOj9itk7E7vFnPsSkzXTJbdgd0yLpaAZadatB\nPaiT+I1uqqRLN6weBFb87KVVmGkwDfX4CQAnzIV31yEWXhGYdDeddmz5my9I\n+g6u1PSgl3i7SWe9fU2vygb3hJi/OT9+uQLb1fcTgnzrf4YPna6ml1DeRQaU\nPAWnMFFzA6nR4dz+2Ah1ZhrtD5PkjdCC81r3yYj3l6W9y/kFXNIxL/CjtF5V\n4BpC\r\n=c8Ae\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0MJS38NsyzBNBOzCOf3CmZgkYlTV/nF0JxCjA0eoQ5AiAVsVBD9TXp41KLuONWV5tLE/42NgALTIp/FuaiwA8pcA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.91f63179.0_1589589272498_0.5047369379966362"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-button","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.fd8f8f2b7.0","@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-icon":"0.16.0-canary.b8aafb56.0","@material/mwc-ripple":"0.16.0-canary.b8aafb56.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zp5UO3pg3MO4RWaE2yoMa8Le2SJ90e3AlMTS7rj+91h12S4jlnhBAPw8KCZRygx304UJZQx6fCxXN6ikopaD5w==","shasum":"caed045d778f46eeac4211acc1706e72629acd79","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSLCRA9TVsSAnZWagAAHoAP/iqqNbPcOvtRQIsAAjHk\nmPauWG9I1JpNd3jXQDhUARY1KF/Ku7s28C3WTAJrtASpXNtw4FT/2+OKXwgi\n7PYP0ZgsS5UfhQFLxhbu6Vjv0Kbv8ViFLhhRum6mcGAb5N6qVpEVouE8wI/K\nHbDuu9ljMTc6cBhOuTe4DtgpgchBriShcLFQB06zRJTr6MIuN24pP11H9qq7\nUOe/Pyt0G2czhvg4cdFY4Re8vFZaVJmZ7leTgQpsvBOQDAf7BkFtfqYOspK5\n//ezMxoLVyJNvTXjzvmxCgUP4MqSBM67TEL/gjR4xrXO3AHAaLa3XRSVSYHn\nGqQWZrwKnLzE+Dam3X98Ml5LPW9vGSwu5jTk8yz4LHLTeIv3XzHdVmyfBb30\ngRVHBbO9azqMon8yob+F+9FRNr0GLyyeDMzGlsqbF/49Nk0D2XVscNGhlHmM\nDAO7BQ1wZjLDkRdEso7je59EXMe9Mv5lviyw+Pp388QDovMYrY28+ffZQaU8\nt+ZXyhVamLjbwC3M0Rp7NEyfhxgLmorBKFtVg59BKmY+3hu3MpKAuoE413Hb\n3MhioNe71KlGbb57xMoonrw414m2rYUHzlolI35XruP1a3n7OcwQqmj/HhOw\njGtkG8plvV1sr7WjbzUav//d3CskRvj+qRVpfChMzDjATv6w6cH23AotALXH\nQLVh\r\n=cVvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEguYroQjP5n0oFtl3TmfnpkoHvqOw2jUcbqoHCxInzVAiEAsg+SaqhPBok5hyc/VCC5cqw8t+m2TH9M36n1Wc8OFiQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.b8aafb56.0_1589826698921_0.9124038927733571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-button","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-icon":"0.16.0-canary.a564b194.0","@material/mwc-ripple":"0.16.0-canary.a564b194.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-uQPLA2AltHOjhanSISAudIoj2AMg18YIaZunZ2F4ZuLpj4yOSzG8EXqWgpMD+xy44SmvHD76c4lcdoTVin32/A==","shasum":"473165eee5c7d96fb1bd0ae30eb145006156dbf7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRDCRA9TVsSAnZWagAA/aEP/1dv7lCQOVdg98pfm9Z0\nKo6SPe9M30uxoU9thRD1sl8c7rGePemcr9RMJEbyJYjjenGBQiBje/9hl+k5\n1DfC4RETMXotv4fQV6a9qiQdIqTA2ijA9aoU77R5UqPKa7elEjf/Wevsms1K\nKQN8aIOGp5EgByz3IGQs4Z/xSMoqD9XgahZIAAZSH9bkktcCUc4uLz2l1or6\npLMb4lDI4/RL8srWhKcUNrtSDMs/ZJM+T65+hQsf8LayNMGfLjVUKzuukRHd\nH2lOsLkaGXNb6dDuO+vwL6BIJiVZrAERQahlK04CJfNMHXmCsDmJ3cJg+V7w\nFvzGIMPuTetTlqPq/f/bDpae8Wr5pGpHsSJSUIlwVHihiXvk0BPGjXKBhQPP\nx6VNdnQeLQB7WP435TdR+ClaI1+TbSjnP5rzIsI0PwHUQ0AersjDVzxBdqv7\nW2fFysRNS0E3WxSWTEnvHKdTytxcU+bCcDZkOAoHrZd0uV3NAwDhIodXEh+n\nrbM8T4oGQDrF2ckevGyn6W2ZKpY6WQU7/wqTjNts2EcdN2bIiPvyk4GrYFgg\nxLsMNuWxNZDYR3h6h3hY/aPWRYhi2yPBN/8Yxotcp8Q0b4Wqjis8rWnuq8n8\n6J3pwSBLu2mDcLTcwgSjSzLxWB7nnjypELUEWHti9OOx/Pw3HVGL2QtcYCsw\n7GAe\r\n=PbyK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8LYSLwvWrAAOwsIhI26mUFDMLbvYvxpxakXIH9k9DHgIhAOkDzmChCM6xy0mESQ5g2hLwGkmbom/Hfy5nY2vbuaOs"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.a564b194.0_1589843011487_0.29384058309119787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-button","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.730920fbb.0","@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-icon":"0.16.0-canary.ef56465b.0","@material/mwc-ripple":"0.16.0-canary.ef56465b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Bo8ER3OnMvaMTT24D7QIEIN92Vkdl6ar8/+RdCLsFcCqbQEuPpO/khmTyqrrVZ3lQMsgX30Hum+pO43DA/2CpQ==","shasum":"d4df746750f04977240545578bd7753ecbac7b79","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1bkCRA9TVsSAnZWagAArCoQAIP0zjqNNFlKzNEwYVZw\ncEbKMOeYEbY3Jq9hs/sfcTQ+I+qXG5rX/Z6/HQANUMSMQP5Q7DN5G9aSLQ0a\n1KkpxYITVFQGJ6r15RMPOIXNimfhhDarbm7Z2dVQc+cIj/xwKJN4cXNMO3um\n2v3J1sKc3lPwxZVWMph6uIbeUcTLSFc2jY5DtF4+h+XtyWXGREe/KUXbFkS+\nm1IMpeGk9jbF/FAMRu7RuH9z7uKKK4gUcdaEoDTwWO0p4dwVR10aXBMAKC8c\nDmw6jORLZf2wVHYIcspTdJ+13OpcGLV7RZVmOOPYrWQrhZ6wxgvClMk1AW0w\nmyU42v8SkDu8qgh7Lvawf5FfVzWaxf+TJ5b3fzpwtQ+sqTdR2MDy8DamThu1\nH/5R8y+JbaM7xTqj4JqPqjCJNqQWiftRRDYvVJOHACw8w9lK/PVld1xa/t9D\nu8A3/3/N8Hnq9h0cildOuEHeDc3UlTU8M7WPmReAx3j66Hl4KBMrQpAFC2pI\nthZ/GLRLgq6ia133Tzp+XGoJ4J8JC90H69ptJdBoQyEWgg/ony0pGxY++h1y\naeZBEFZhX2E5Ea4yZp0XKtJlLzUNRs3UPEKYcW/0aKgObF2ye5cojnrjsF9G\nqp7NMgrsWMFb4QyMB/lBtoyr03dLPQb1+OLZkLueT8k1tnIbUBKiUx128bno\nvpJ3\r\n=+nWn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwvrVsRdeWGHj3DHuqpVVxcY5kF+0i8++dTcd6y5lWTwIgSD8lytbujqA0RU8m14gTUHYB/KZelSXN+YlxvtuW1VM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.ef56465b.0_1589860068038_0.17285870633420197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-button","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.4497b86ed.0","@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-icon":"0.16.0-canary.c22dcd71.0","@material/mwc-ripple":"0.16.0-canary.c22dcd71.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j87xY+0qhEDFi6RcHl1dYmpHHIU8f7D9jroxhAKTG/WTg1Qql7Z2GM1j6DNeapaqJrNdGixvkWaABoGK8bwfxg==","shasum":"49f7d407e8760cd0a1ca0b51a86fb4223e0ce051","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBY/CRA9TVsSAnZWagAAaF0P/0WQfHpYHErvkXb+anwF\nx0CGCxzauZaz1z/uWRr0ndVuzjAyj5Y+x/UNFiOVYuM/Od61rv42fKMgGBt+\ngEuxsnnNxdW86fsnYrj3ZERnNvlRz83R8u52mN8cCkOs+JnvrCkfPvVrJduX\njjdL3FoHFxbeQYXFSnJmispiQoC/8zo7AesxT0cIzUADqr5SpAF5rSzOOPFj\ntQu+MvXqVv9mTHAvd0xeiupwJocmuEXRZ34/wC3H14MTm2xksJX5ElWdF9ws\nIKQ30BaH75Bvm+XtMP58+qesBHlHlZ8I4USo+ROwF5nqo1s3KBv7aqxyvxyp\nZjiDH8nZEVyOnazqurHCaULP5ypz5mDUDIT6p+mrbUZqktEClsSO6wxrcW62\n9kD9IgOZBH6GLUzioRwQJUckyZ/wy7onyCFaGW/FnWEk2Q9MFrCk9MqB2AqU\njYrcGlmUHlsyN/ANscK84Krm0EslowetIP+5Jc0QDPFNaEPyTmC0SQYZq00d\nGNvxPliUoXjarxrAc/Yu+OvdeQGXR/JJCVHJV3NhCQeP/txcZbsld+rqusne\nDpVOUfEeqDp2hQywArU5+IMCWC22MKFPW5RCIWa2LcPmpIYNPp+A1SaTphn0\neVQHWWg39V8MtFfs6Fs2AUmH9kTpt0jS+tmuURgicR3kPr3DGzCxlQtOH+Gs\nswFy\r\n=5NHG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDG9V+0f05QrtkX5Mo74uSNs3T5Ro+5voCVSolz//TQFAIhAL62Oe2fQwtLgAHzzqt/43fHTG/rPvWMITvCEv5jelV0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.c22dcd71.0_1589909055471_0.9643643777939426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-button","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-icon":"0.16.0-canary.6eb62388.0","@material/mwc-ripple":"0.16.0-canary.6eb62388.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E+ze4bNBDjTTsISt6wkJ80wCNN7mQcrqvhzDbhGBg4qD4Sqt/MEEb2SBeg4DR2gJg1rYPWDp7uro0+YOTr/2VA==","shasum":"7239961736bd646b69c79fd16ac85859c37231ee","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEO/CRA9TVsSAnZWagAAm8gP/iUnFOEhCz/1aNfIzwFD\nFRb70q5qicyh3UFmp1PxCDolT9goExvJv0B29WUAMHZMR07OScbD9YPj11P3\nWEgAJjDBXXvxLjX4GwzXvlF7Zw60Gw9TdVz3f3Ufy1HMEFepEnajkENnXq2B\nVClNCk+ERF+VOsSeebHllMce1MWWGWcBplSjU9dX2MAK2fz0q3NqCA9IOYOH\nLJUFMOGRyD7gk6TXELvx6eLqb8ZkO0BAOre+Dd1DhLPwLnFWRMDYoZcU3Vnc\nr9X8lknCWiSegh7ENYglaZosY8DW9n/SO8d7S+5UU8NPNr3AnKyRGIf63PQH\nFPFhhqUPsibt64BWE1h2l6Q9M+QxSWOYzTs9rAhiMiUtXReaHzSVPpnj+boa\ndiGJr87zrNtehIEfJL6BR3pj1XiroipTnQVPyKArr+FtAPfQSKLo/NsLeZOz\nhJn+IIODvvHQlrzyGOfx1V8qD1as8nsMOfxSAa9wt3UHtAbjOwBcvPZtzkkc\n+8FOng3aUeOZoioe+eXBDbdLwdO3ZmY/WgHfaSetFvtVBL7vuI0SJbpNV1t8\nZwIH8JEeZqREX4gce0RMS9nhnnx0whqrjJTrSKywURfvlLHCi5uQYKok6l8g\nud12whQw3PXgNC/7NPDnxvGf40CcmRXJJfUYYfx7eh4iFU5zjqPAZhT/xYg0\nJf/P\r\n=KK4o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEDvD5Ji0UwdUkMDQf8/lAjHs9sGop34iJEkDE2STmRAIgZ6e5uLgr9T7nDlc90WTpdjwkCoVvZD7tIBa2MjybRwg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.6eb62388.0_1589920702820_0.3112859783947475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-button","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-icon":"0.16.0-canary.9bc3230c.0","@material/mwc-ripple":"0.16.0-canary.9bc3230c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z93ZUi8lPlu+n7mRC6kQfrQnwzVrA/j76YAW0o9leidUiuKJ9X8EjQpa7kNnY+sxFASv9/8GhN4OS68UKElFVw==","shasum":"d69dbaa9b9d5f4273da6cc84bfa281af918e169b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFHdCRA9TVsSAnZWagAAzssP/1UDVK9HUUhlZizw9jts\nEbDMVfc2OFn1hH9dGCZKzir8ks2DAb9m/ObZioaIE56jvRp+a39iN70aJlpq\nHthbVUBJl6QiHoc6wTQ5nc+gV1AaA8HzGhIq4w2Or78jAB9zJQzt9SfD1CiQ\neqlDie132DscNeuXvdeutpQlyAKIzfsuzaYcl62r1HZp7eYhRi68ZwaM3cEB\n78l9AWU4F/St/Bqumlm7oUIjcnckpPnyODzZt5Y+0n69dxNe4MSYORTA0Cqq\nqVRF7OwIa/bP/PWyRl83ElgcDijeQU1Qgb5x7PR9I5lHfIigMEAw+iZMD2G6\nOjeViR6PufymXs/xL+jMExc2XMbLjq2lugz/omUK+U4/hyC3gyf3tXCdItkV\nJTPw1A2O/8LSDnji3AiloyftuxBQ8jsyN+nKoD0zBPQmWZ3/5mNfd2oxhfNs\nnTX6BEGfhMK2bZN2s2nho+RzrM4yRSpa1B9AbVZeEzGCoMAv2gAYiqdkHU+S\nh0lNarL7hFfW+fzuNPvyItfcCqqXbaabqAigXRPu+0AO5FR3zC9OhWIDV7j3\nQ9buNbUtgIlgcwOimKXpwk04BGQT1APQknPTKKJY8tLdbA+iJIwb5jCqGGyv\n81KyxxVtfRNzUo56IdfGxPf1W3+YUPxaQvHd5RITgNptFUtPX4lG/nBoqjZO\nSvuD\r\n=nthT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFLJutovlU9HAru7kRjbenx2rwaNg5YPEQ0mLymcGNOwIhAJY4c7kD5LTcFhOJrsdmAOS/qVgYIoMBXghSiB/qSVeS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.9bc3230c.0_1589924317090_0.16292024962458496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-button","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-icon":"0.16.0-canary.421a6856.0","@material/mwc-ripple":"0.16.0-canary.421a6856.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lMaLj+uJKA/2JmqqHFBKNHQ0yqvyYIyXqG+RJ0fMSRRKgRl8MMoHQPorAhGRWeQd6PnLinsA7VOR2A5elq3p7g==","shasum":"e960c710a3c9119baa8bf13567af88526652f583","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8ACRA9TVsSAnZWagAAGCYP/1GmSo1YfubNBscBc2Bo\njqwnQOkRkwXeVLJN+tpgV7WEY/fd+rEAibJYXhmRAo8vADh08YGMhD8E2MmM\nyXPsb7seKZXzmxKgl7TVTHouTwF48Uo5qZNybcVad+AjImqDJwGQYAeXzbww\nu9U7CsD0ZT8eUvlSAmIiw5/WLDMYVolO6Ot3QQK7MgDpfsp1zyOhMy70SJcH\nfXZBiJF8AUQXQVCgZHcx+jiDznRJ6UKvJfoAAPT6xMKUTfeKXfvd4Rx+efOl\nb5DIeU7nasDCqtTPCGrpLahL/FHPwHFKffPfjf4bk0EzR6lGjHTHBly/GiVY\nudAOrFkgEckM0cnjBKqwEiJ0RiNS99fYCstp7eSL1obiHyYFQ3A1vq56ENhm\nn6pzbPdqjwwkSbfmJpgWbZkr+2YUkOjIcLbZyZ9vMZjzA42PxE1RG8qBTH6P\nCglM1oftnTySs2rEMUny+OPHoAgo6krOQHsl8EtjLrT+zPQ/XBCHwasBNnlJ\nKyuMq16YCdr0jLgcGuxZsusoCCRGHIWVAeCaDbnbZY49UuWiZQK/NIegyMeJ\nZzwgDicliBehYiKqwetypxDnyp1JmRSkpFXtIoP5r82T5rdvviu/VBu2b/M+\nTgobhoEDErswlcDddu/e6t+AoeFgCeD1k3h/x1L7SVQA7LuUawaO7hHIMNRF\nTy8O\r\n=qEq2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEjI94HiYwK3uu6L5bRMGF1mye0rMe8SlbjSR48zTTEMAiEAxg5A6nnKDRZrzIEtgeGAn0h/D8sljCd41DMrQP1APB4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.421a6856.0_1589952255216_0.25953502333671663"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-button","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.e3eacefcc.0","@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-icon":"0.16.0-canary.761aa6f2.0","@material/mwc-ripple":"0.16.0-canary.761aa6f2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oR5u565XWlv2r35fRGDqBLMW8d4rZBtJKbv2V23zgDjpVO36JNw43nYlEPlap80UIYPLiqfHcvMgM/JUi2BoPw==","shasum":"89876d9f1852a9fdafae49d385cd3b398226eae6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGKCRA9TVsSAnZWagAA0yYP/RwSmy+CPXFAp7IFNBCW\nB4vBWwZfLDLBktnRIb5NCZCWx8D+6VlK/mb0XhImVrMtaLf/1RU5+hDNdXcK\ngGBvBp8jOIA/wPN5XHsSmgK9Z/YwsOTKGmIxZIGQ55GW+HlRQ2ksQoRrpe/8\n0oBLOTLpf2RE9NAJnAe/jUrVOHWI2RPyskgXimPKyzmYtK49T9FbYneTSu6e\n5CZEu4ZB/HJJRrK/VDozjy+XTn1/4FfDOZkxgk27Ux4rVUJFRd/6FOAeqaQd\nbW5lWBqqicsPK78MOpKQi3l9+QmivYSa3dbWayXNFXvJveF5PRShunMbQhCS\nW/FOz+G1OQV5MRVYay64NUA18mcMbhZGPBFqCZAHNUdv5SjQYDq5E2tahOgY\nYFULGH1y/GQQo1IVLU9k4CvWMHrGnkFdnKw2YsVZW+gXIW77UREiaQdlDaqa\nzY85ReYHigeAXRSFGVS9K1+upmSxu9qqlpSI2hmTvt5aRXNpPagFbP4aTIsA\nq7k8LNnCZHqfWOou2EkNWqHTwxQ1iyT2oZM+WaBpIBsWJtLtBF/Z5j9HVwWW\npZdIvz3d1UVzet4WnD2WfPzrMMEiyTsUCvbbk9bvctID5yapzT/3zS7Uc0vP\nxuAOK+A227CCYqlh42+mRv1msDRZNH9FncauHowfU0vqiZjHjue+fgyesb1l\nIWeH\r\n=RvHe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTFe0VbrzHCEyDIIy8v+4RgMSiw49mr8VpERg0r0lgmAiBWl5+3vFCCfBb9oDgaw/k1eYJWNGyHNMnt4lTaDCj8Pg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.761aa6f2.0_1590010250227_0.3408141671903797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-button","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.4ebce8d78.0","@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-icon":"0.16.0-canary.f8654c40.0","@material/mwc-ripple":"0.16.0-canary.f8654c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-icon-font` | [`Material Icons`](https://google.github.io/material-design-icons/)    | Font to use for the icon.\n| `--mdc-theme-primary`                 | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/color_6200ee.png) `#6200ee`             | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`              | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/color_ffffff.png) `#ffffff`             | Text color of a raised button.\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GxkFKAIEYRwrOD/frWNQncold3k0JYN1EJ+5Ds/Hzz9eovLNyFztKadLSfGluaPIcvtPbP6KDggglg7e9EVukA==","shasum":"8e164a797714dbdd65cb07aa95fab28350f30c10","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":78639,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPJCRA9TVsSAnZWagAAWocP/0wLCxL9tpJeBmxrn8hM\n5d06kprpVpSoX6fLCPau1wpaG4TUfe/kDJL1a3SoRP4DHcL3uXMFdcOQWmON\ndCDwu4rwCWXbsiDceQ83vOz2EEEjzt/LUlCp62B/d39dNkmK0ZsuPdvdV0vN\nz1gvGeB6kOrU1MSSzJ/Eu3xLBppK25xPw8F9Ow3zV4NZjV8ykhr8wkPgDkt0\nUnsLltUPrMz10WiBtN0zuI5dumvs1o6NbGWFXdxEtn24I6sEs5BsyN6IR9B8\nx1vBH++QIoow/rqmweMCnxoAXIFUdqdYvUaxpkiZtMDkwhfgC18qdPBwaxoi\nPjHnoNO+z0N5Lr6bbBpiz73QnLpyDMYCsbYATzv6q3KwuIlLfhpIp6BGJeux\nz2Ar0FDznu1Yx1to9ZctpzxdwwkQhq2JXSSC81fR1cEliUWmzU5IIl53p8Pg\nlHvq9WrPm07KOktHTWXlzKFBdIGJ3WXxEdv8uSyh7/QLDVBldgj9EgbUBEbH\nEQcDvATE2wLModoexP0kfAiCZMZ1fMRceAp/zGt3IrE4nAl6zQm4MAD/ghis\nkeCIQ7x+ubju5yXz23IA82fmrN2lCR+rIBdvrS66O1SqNEiz2Hl2bEL8/Bur\n/yF6qFkY0oXmJpALzJplmsQmEutPDN5f8Jf+DGcmrPxCu9tG4o4m+LWN03vS\nu0rq\r\n=biCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFUY1Qsw/DR5brxCOAyUkT31DlEYMN31d5dz2KlKEeb1AiEAiJrtwTLJenP823M/o+6xg3NnGGf0I248Hk4Hh2IAdNA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.f8654c40.0_1590010824843_0.9335682260651312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-button","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-icon":"0.16.0-canary.05f3853e.0","@material/mwc-ripple":"0.16.0-canary.05f3853e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3hfsLpTLQ+KWYPCxA6EaCblNVCIiJH1hy+QR6R46dr/avuOdZ45MvoTy8n5DOzsrsLjLRZAww47UzBAzhdMkdA==","shasum":"f3e930091bbb073066603bfef11fbe2bb21157a1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtcCRA9TVsSAnZWagAA+FYQAIwjgoCHGXLjbsBS/Yhw\nbTDTQQcGdfMc62/EMgv5TcB3baejvs5OMbx5+SFKjimEmj3ZdKHrXB1sNX1O\nvEvm80vREJbv57mkMtTkHv/6ls8WphD6jkrLBkYMbdevbZw3SLsR3SQQL9tR\nw9J77cjbLri6+5epLaMcoCIoEXsy/jR4CQc5wjQGwzOMNLtXVIYzMatAi8jT\nd6mTAtFRnsCbxhcb6SZOi6CcC3u9kNpn6wmDk6TdiEGFC93N+OXhyC5lXeYL\ndjfjLpJ0Rz++9Ze12DuqkuAkJIKY4u7xR54eEstpwuEOslylhC/1j2zlYS8x\nasiV8as2W0zrmyoiI2Grw0yfE3R5Q78gnmlVCE5971Jnkrq9zA+fsKKI/D3r\n7BYqiIOo8S77bnraornUfIl2jbc/XCIKEFnVkatkLRlh6XPeX12Umgdb5ax9\nI5az6YY3/PcADmm9XrF75YSeAYWKKiGN/ATbG8aLj9qFKydaQ7aJM7NApxY0\nfKNA7mtGXvwjlteVyhI4/P/MpoCj+WHL2T3Es7EHSgZESbO2K2BdCgb1I+xX\nhNPTAu7AUJqb8BhQ+IEDCUMOS7yNlilyMFUEhgBXxuZQN5RsWDvONogl/5CB\nsoXAktUzsWhG31F+vLhXpn6UCR05p4QWcIreb0O34bjbRfe/6GeBcS5JsUmx\nzn9a\r\n=89jw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0z9FyjlNHDJRvjJ/6xfF5w21llVzHVw9Gjs71f/pdMAiBy8f6sSFCAPSdWTEquT2FNG1cn7mlk4Sj8OtAYjzvqBg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.05f3853e.0_1590082395767_0.46307061816969464"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-button","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.c67667e8e.0","@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-icon":"0.16.0-canary.5fe61f4e.0","@material/mwc-ripple":"0.16.0-canary.5fe61f4e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nmgJHMns+ffrGWknA49MzK1QoFZyHQXCaaVU8jIvPDkaVOjE6imCRUPqt3uEkdu+IEX3tV+oOhSq1chV32NHdw==","shasum":"9ea17b5570c54a9c15fcfeb67a201ce9b6751d9e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwm2CRA9TVsSAnZWagAALoQP/3HIUoLUGTbRuH+md0Kx\nNZqqDTSViqRGoymfPAzIZ3VzdQcuYF3TJH/owQpbZXp6N3ZlvXuV/3fsQv5I\n2JsL1vrPS6p+4mhnU8SYPhHhKT8Qko6m6w1yVdCzUh2hOyr1rzSdaBV3FJcT\n1l107msEqikc7DsduUGAKHQDb/TgCX/AM+F1fU28IBTyMgzsZ0KFwn7Ncvx7\nTb8EjPQU6U7b7GHqwZjA6ul5RBc8cujTwU8MJmaOlwnwp/GtrjoJb8SlyPA5\nhLEriI3U4Y8gGCJXIaPHiK+VuUo1SgiEfalaAbDJ74p9/mkcQTftVo89UBp8\nQXfeLxoKp+3lI4PfVyXd3E6fHCyV4NadPVaNNPdA4514/aszSlSgC9mvfTyk\nPA0DtOAt4k85jTAKHd2/aYDPn7IKscafbvooVf5Ahy4SeByn1JZo6p55yaxJ\nTi4eD+FDhNIlBts0vlz1LnRr1JHGiIwl3/xViMtF2jCog4BzxfUE6IX92MJ5\nyd6QubO+MrDUW1sRF4lzNQUn+wH4bMAY8z8xvU/M9XWJN28TXSS2Rd63CFvF\nw4G9EpFl+BI3Yo7kP1M3KbwBkavD35+XvT79TLZWGs5jSWxyCyTcY9z6VocG\n7iqAChl6uuNNoRKPb39fwbmtVBdzT6fXUUHnfnrteUzVnxGIGk0EYyQ2xczu\nE7yE\r\n=4dPt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQHKMr6lADEF3LoWKL9wQTZnhg6R1G6wituenyoql6MAiB9wemMTjdE5xn36KREgTm0I8YAtefWVLq0sgMnxAObrw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.5fe61f4e.0_1590102454097_0.6132409986249179"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-button","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-icon":"0.16.0-canary.17d33745.0","@material/mwc-ripple":"0.16.0-canary.17d33745.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-e3nkgekvgEaMvSVy0jqnMCLqiFjoOcKeDeLv8otc3lYx9XX8ifIzeEVVfClmfSpW/Cp0BB296kLi5vytZexVDA==","shasum":"bf44f26d02d146500f4cd12a6726ad74934e1c76","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUA8CRA9TVsSAnZWagAA2GYP/2dfRx2DjdEF4xGP2cOu\n4kS5p4+TB50RjbUwLfKcrY0+wT/4rykf1oodNwjIPZlKy1qHDoLwVzTl4alN\nhqC2pBwEfI7Da35L+WEs+dupTvhNyn2dguHIfG3koT2XIL7vFn4gqz4umufj\nfF/XBegXYEZvOH1Z+twMQSoW3EUxXLVlDYk6ndzF+P8233mulNkTs9JA6uZi\nFC8McFLE4obVUTtRgJWmH9/DvXIjYxXh7Rf9PASNIe1tbRXYqs/Va0zvaC5k\nV0lbqj2DJ/QjJGInwW92w8jXL8hLnUm/qe8w/Cn9pTMbMlo35HU2Iu/2lbcl\nd+ltCEi3NO73Wc7mEekvMyIMzet6WukfpGgK8+F5yufKMtspC0go20JTXeok\npRq0hDSGz5CF8HPTilEaM8jmAvNgFNjVbGLzrXabRx0Pv1ntFass7TFQlQH8\nEuJKrSdymiCyGq3dxDSX9C9U/QNJSAyB702o4v5OWQnPIFd4u6xDGldx2peC\nOj5R/d7rmBYB+uvxSelY4lE6rWB69LE+8+VyTCDsI07CPHQkRzC6uIMxg++g\n0KuTxe4l0gab1jnGiJmzngNXszhuTqsVq9K1UP4tNHJDejJFl8O0wG1YIBqR\n2AsOlk0HUvTIOHNqN3zyFnY79yHJ6IOfCQWSTi2QLM+z1dnapiT9kw5QWqLy\nH0kq\r\n=waUY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsufnwT8KvpFOsH/o81fl6fGIlHkHvb7oZecDNekQSwgIgIVcN6YwjgLd55YEv6QqzyGzTvPYYBqbX4o3uylop2gc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.17d33745.0_1590509628605_0.6001158508567377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-button","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.c113fc942.0","@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-icon":"0.16.0-canary.e8b52f5b.0","@material/mwc-ripple":"0.16.0-canary.e8b52f5b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WQJb6TIalns4xgRv+WgPR9+Auy9RqryqwnUBOGH9XaEBgaqwocd0xjvLgLolunqiFWwmtDVpvDMD9m30bzqpwg==","shasum":"6cc484ef5a16c21ae0b3b25017561a1cfb7b1c1c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWMmCRA9TVsSAnZWagAA36kP/22qfrMkoWDRNVgifk/A\ngFHCzritH+AxPwc4B822sawQ2i7a/lS/DTDuiq3yoRXzi7sXpgG6UsWKBDPO\ngpazoUsXZosKdgFHFaHQHyog+HCWaqntO28VWyJ7230KU/uzseuhvYepVFEZ\nW/Jww0r/suWA6eNXT2ByFvOyYIQnNJ/sZarWO3WbsJS/2aX89mxx9FCTaqlJ\ncTlAN/dM82Uka0G80B3YWIiA2o0npQF1zOC4s3MqjeBAtQiapfMLtMtNK279\nY1gvK/yYPsj7nY0QrMgo6GLKwiKnwBIRX7FKCaHRf7gAd80PqVe96+BfRuzo\nW05y57wkerV/MYiyLPRXu2NY4ez7nmjobaEcF/kzepV359SdiV775b5smb9K\nE6/a2V7dGxKklvLoDZA9Dmc+gZkqcJWq7uCDGxt7ro1fCA3mvniyitRgfQG8\nLaCYH0McT0HZ1gclA52P6YT/Lmhose6Re5GhJt+mFgvPAzpXZMYnCn5G7t1k\n480ETRUx5FyMzYr04n2dvUsf1dgwaIAXvoVcbOfDDPwFcETVen7B5+L2sZLx\nRcyWgU6SqGR8pF4c6y+IuunKHre/FBr3NDU7+Yi3MJ++litv0b0WbF2L+LGP\nSXzjrII6swo6a7QBVBnzpTSvYfB3WQQPyPqowsfvix6XqGLv0bZXA1Rqk6bb\nCdyW\r\n=6mNS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGp3TGKRXz8cVV8FC3x6B5eeAJPbuWAJTv2zbfbY8+vKAiBlduKCBFNhdZdu7vhQqcHRmIA4ZZylAi2Fn2K05uqSbA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.e8b52f5b.0_1590518565921_0.4152204472520751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-button","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.01de07011.0","@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-icon":"0.16.0-canary.09afa0a9.0","@material/mwc-ripple":"0.16.0-canary.09afa0a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zMTG6KJF3h2jajHS2qghcoSIUATb1onaTKbkod78vac13O3m5UW/MpzyX7Ld7SpNizTYpXz2Q7AV4DSzjjxguA==","shasum":"0d5ff6c3ecc4abd986cd85c3acf9366a0ae39769","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2kCRA9TVsSAnZWagAAv5cP/1esaCu5zaAsRSD6vWMd\nMgmI6/XUKbbqytUJ0zwBPwGh3u8xwxhKYoqO9Iys8hUue+TntqWEki7k9vpk\nTSynS4FercFL3goKXOI/TLc7gIJqg4glMOvrml0GGi+6n23BOLUL5rDulUCI\nBV7o2HiovV5AbvWlX/izqmxj0n+LFIl2/CtuNvknUBRosNyOJj18hJPpZWZC\nZogeIeQhOqTgz7/WrCfQDcdPwC0iRKBPpWGG7nvzgsGDYWvWihZy7nbfcUhW\nI2MGfnLhk75n8l8GdEldfkG/DvpoJigwEDfVDvPfnMEaiypNDPOF993mWEwz\n6Gs+2hA0krZs232jAH4fog7OIVbJCF0rS1xyoE7qC97GyPYpdVSVB/iiCWM1\nGxbN/SFYLxN/oMPNM49i8QcXwv7E+ijg94sWmkj8tFM53y2aBOlqSDKftQcS\nIMEZu17Ic8DIvzfY2p/hwAsgkPBYWfeybMAHRjq/R3bZs5qZDQjSXn7lWw9F\nYF/uIfuUMHRvXCw2eIDjlMBxwBnnD0gaCmcoTT2Sl0fnnj+me6G3LtXOdb20\nBD395WWgHDC1ZIy+B7H3ZaHKAaU+BFDW0BLG0XICzt3L0XKjz85U0I7znmi6\n7IoMa2ozOehpy7/4isyUrf50HFUpT0Np16v9GMcfIISFnNNNEB3tSQMfgpck\nj3oe\r\n=zNbe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF8DxZoDbSkPyY0mt/JPRlDwJndOBCKKjalDVvI9wS3wIgD4JVBMOR0XW2fLn/VpJ8SKoeLGC2JlQRT3CJ3n+gToY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.09afa0a9.0_1590529444486_0.40291273656515414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-button","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-icon":"0.16.0-canary.58bc9166.0","@material/mwc-ripple":"0.16.0-canary.58bc9166.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YugG1fJIjMBvr/7SJQlgm8HDataiJJZn6nnX1Kkqfc01UApuWovTKAaKtVEXdM+2WyM1Idv1UgCdl1YLK8+tkA==","shasum":"d3035b89c340ba186888f1fab42ea687fd404626","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSdCRA9TVsSAnZWagAAo1QP/2uIhlf9YFg1KlW/BQqu\n/3lj46/1k7HSc1z1d+uU7aeYb1fP8gZtWCDFzL+MUe7KorHsxuvlr5v+i/no\nwQPx37GySRIhpY0eFpB6VhSv1f+TgJxSTIr4eWTqEvoHHFrJLrV3Juhd08MF\n0R/JV4lonnW7Xsvk8V1tImgC6uEEM3lLHaeWsyLdNbj5RmRmKOH2PB85KEap\n+kYl86KYUTOzjQq16dty60DephgoWBLR8GL/BPqEqjuyZoZvI1kbVniFwtzv\nzStppv8PIOgkIKAKN3tMkKzgolgd59yRRTLQKGLB5JqVGKAaOF7sNSkWQX1B\nbxq6IN0HYjdREq20RMprdhmgA/K+TXfA2mv9h1PlnVFkFUTyFMZXFHWkWagJ\n7NTfHp7fsKensZk/ANlDQHnXyjlu8ghhpa5IKeq+sh/al8SIHdDS3VYExs1p\nf48jvurGA36BfM3gPxpwJtQa7tCUDwSO1hsdUBm2gNNRYowI4b4B5W4W72ko\nbndUn4M/fpkNXfJLXd6bqPc4ZCbWe6QRZTaavrl3E6DcS3gKuGGy6bm1TLgm\nRNg6SCLNiOXMxzwkiZ2S2OcvmPNUAlGTO+mdYGBpJsIx30AZgWkZsAhJI27c\nh3Tm+q8+nDbEZzFwcoQkvqtP9AJ4we3jDKbEUB07q7bpme+oPCFpfbSaQ78x\nwFh+\r\n=enl5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDaZxrqCuwyp/+q/0HH2x5lBSqfDOaA1dl2CsIq2nu1qAiEAq2G3osNi1xENYSk2bKfPcmhCwdiXaWkjOOq1O3uUUsI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.58bc9166.0_1590539420992_0.47820677683145596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-button","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-icon":"0.16.0-canary.43bde144.0","@material/mwc-ripple":"0.16.0-canary.43bde144.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4qTVmFya7qtmUjnLlgR5F71ZQXDaAaThJhgFCLOW28JgOoMK4xJPTqDW7rh6xtK0RX9jJ9bMsVUpg9QQqnXHeg==","shasum":"3ba88f7b55877c1a8ca5b714c6726f6b2084ae88","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrF7CRA9TVsSAnZWagAAmWAP/jV4bM6P04zkRVsNFGbQ\n1v0Nekq7ZQryMC6oZIdT3BvyqMHAyGsCH8UUecWMMGtt9mOZ3HKVrcPs2TGa\nTWQQPlxRA3LKg+oQzzPqGINKbbtCBP84JEYaLuXqNAcnvKVy/tu45/8OZz7F\nUuQHH1VHSVg+ggS4NvOVrHXUVpp+Tug1K20OccqTuJ25zzehFn/rrTV4nqcz\nJMM5JywIKY1xtOc/cXm3lac/1ITvZQiDKpAaa8ZfdXmV18iVOXcd+b0uqGdl\nK1NQ7epJimT3FlK7Dl/sKpLdM9WbgEhn7lQbmC1Tz8TG5Aj7/I72tZqXKb0X\npcLcrfJaI6+85kloUOMJVDHGJ9OP1WuPmBbPx5k1dZx9aI13igoFEtItcLFH\nkFnsM4yXmJDoNyCuJYsq5n8X9EKbs1GN4JusM8mTv3x6DoBgZlM0nYsYwouf\nbT3rjGyWLcUTW6ZxcrTBBMeq7Xpkxw1HcNBA3hsi6JbOZmfoAK8JKbBMvECc\nXIgljT1tbXywQ7kn76HaC/yE1viDirFlx0wfloWV/O7lWwYWpetcQdo/52Yh\nYrsjnfRw3pR+1Jn2DQ/oxDNWNsqRnbvZOQJJyIg1+tIPvZOiQwZfrEUs2l6P\nxaXLir6ubBpA32mMi//+GB20WDeXvjdhOBDJ+CosH1H2p6vZAinB4ZKzF5sc\nXhjU\r\n=+sZC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGygVtaNzZGqHvYr6wr2UOzcC2k+0BzSKRlnh9gyRelkAiEA/lk6whFHRHIKlKwKYMsHvSlLz+gT8zmquDg3cnJipgQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.43bde144.0_1590604154555_0.008529948173478408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-button","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-icon":"0.16.0-canary.51067bbc.0","@material/mwc-ripple":"0.16.0-canary.51067bbc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-y5lc7QTumcZRyLmYE+Dv5IMw2xB7AvY7sM7hdg3/UID/5KAv6/BV101nRP/BKVeOmLb20Jn1dki0EJauRr/8/g==","shasum":"57ee83ece045114561f0f706f24363c3fb3ac775","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseBCRA9TVsSAnZWagAAL6sP/RRIrAeaLLqRUftClfXh\nVW/rWMYpqL8swYdhZ42SoTc86RB4a2Dl5tlkSzmvxNYmjFc06EC2otJQDTDi\nZ0oXn1Gx/3+cyV7yGCj3lwaArOLonz4SpMr+Yh4JjAFu2OvgbwugKD6XxOqm\nQoDOpX8ETVZTY3RM4O9wU+LdVjy0bGPuGuK3OT7rWF5aLp2d/k13yneP9yoB\nTbXwr5EvsRcWFFwRHWTVmhEloBDADJPQCbGuypNfroERDQtb3gl6/w4hkGTs\n1Gpl0cukPXvh/tajoNIoF0IjGtMMsth+41nojhxGJBvTPZnNvr5DeNzAOZ59\nxyyz17Ab9ZDDo7yc6JMEZDbA/sGWypHlmR4P0RPDcTKFNzCLePhIGuqWaXXG\n0FHOR+BO8aitik0r8n1OYdO+cEuA8EvvHxOyZ6H6ZdAAEr3PNQO5gJn9p1fQ\nmw0AyFbK7lqLlGKGpXHEWhhKgTihro21DGIBCAn1iApRK+ZwRItfTmOx3mZy\nrjNDmIzEBjidn2gxgAC/sRLXovFZNRqq+578A5CMepBzYP1jm8I1eoUuuRap\nbNua4Dd7J/p3thEhUs+Ju6HJpc/IZP59fO0CSAxZ5yBHpTbsf/2u9CN26LJk\nhjOMSlDcBlK0tgvQI49phaMG2e8kNW9WhwQ4+3ZxbMMTdMWJ5VD7nnaINXBw\nlZr3\r\n=Zxbx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqPfVhmU6xeaVeOpXBEgPDDCp6LHmdJTw+LXoFCsZNdQIgCCmW5Jni4x51EqZGPZ2U4dvtUoSRun1wtOGSV47YGdE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.51067bbc.0_1590609793448_0.5941821096222266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-button","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-icon":"0.16.0-canary.92751ffa.0","@material/mwc-ripple":"0.16.0-canary.92751ffa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-qkV/fcHvJiRdMgYZ9zRQXNhSGRbVQBo0yj7Upixmm7pLfZy+Hi6t1KNEsc/nJu3xlW79c5mYSbHe3YaZedRfqA==","shasum":"0b8954a0ee0cca8784eeb29269ce0ae641b3b61a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1dCRA9TVsSAnZWagAApFYP/jK62/gQiwDpLfWqSMJy\nVr4o+yWxfzlVP4XUotsf/Zbc+wofIpafU98750+9cOxYPbW8DPYUrYJQ4Lo8\nCEy9zCIDb7AV9rXuCgS8mS2TBXDARIIOpmT5AFWclIPfc8wLYsnW7NcQEcyo\n4D6LIBMFY7qdeIJlcN3WBpFV8IfZ9WcttaSwa207zYLYP/hFw/kKoKnjAgcf\n/dtuscqPDOpWP1eDqQC+U9CWQ3lFI1Hpbza4tAR3Y/7yFBbrUkxnoYnY46Zg\ncXtdTCOOKfZN5VRw/VHuthZ+SEV7oRZWGKMbHgDhPw5w4NKczU0cL+UWHNl4\nS9GV76rOGLeWgfW2HHGF/e5sDt+3p0dD+29yxfdUdGBSjXSYFwas9F0mitry\nt/pUtfgVTVbNH1zw6wGzM5d8qXErSMZtDHNYvFbwBPBcTqqujOMbuf/1Mn33\nQJXgEGs8LOvEMVBguFcw2qm11DO3ZRL/HekavD4t6cym4lqZdm0YQ0zs+57i\n3EX7oYnPvMhlJA7a/K+s/WCBUBo87NB6/0OiLikr9uq2YHwfpESrTh9EiG24\n+Gk+RmJjPYBEXA8B8ZSEsV419HvDEWchmRNPKyWcHELh4DqqQTTSmrDKzQ7a\nRhLpPDyfK6Pt2+kJll5fWIhFZFmaD2vmCK2PwFWLDW3wCGZUqnMwqDVssfCX\nsGSH\r\n=QtKM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsi6Cb8SKqGbYdIGNLTOCSWT0jN0gfnCB/BQaI3RT4hAiBsSOKE+KM7KtrBaA3/X63eImQC5KB4hc0h01qQ+6g6Ag=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.92751ffa.0_1590615389067_0.005358501444209018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-button","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d91794c7e.0","@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-icon":"0.16.0-canary.aa2b40bb.0","@material/mwc-ripple":"0.16.0-canary.aa2b40bb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6MUGPvamovI5137QdsboRrdbhvvSueSy+B+7qQF/pZXBH/WesnpRZ5xPFlRntlAWHGKFG9tXX/8xkHD83htJgg==","shasum":"64a8914ebd8ddeaa303aad2ce575cced8338f4c1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A20CRA9TVsSAnZWagAAsCAP/RbbITKr6nGTY7fja/FT\n57+OL+1orgSk0wdKH0Hq1vDOIOMjmv91U5wCuzz0gWoYW23Gxsghu8ojXe0U\nQgU3K2Xr5QzeR75lkCmb03dmis8iHSzRgekiCkJL2Oq5O4TISToXg1gEIUeT\nrcGTHhaNa9k597q3ComMxC4hkPa0cRr3Qdq1tXzZxpyFew0ZnYYINDchNJuO\nSB9caVFx8nbCfsCk6iNym5XOt8J/KN5xg/fKO46rquZRroqImGMtul+K6BB8\n5Gbqw0IVkMaqt7tglZr28ckrHTpL29Fy1yBYDbUtWbQZuX36So7GAPf8qmXP\nrljoZfhUbCYbavTdmWcUmy3jQZ3bpTGarXp6xP2pSrDloSm4EjfIgloYFu+k\nlkuS2G4kXaoTwASKjq7wHiUcRFsGFk3nYWkC9WN7+1InnNJPvoa7JtnDBwcF\nvDwuerE00SRp4hNexGUwnuhPOEU84afbBVAPSj2V3GrL9quRVc6p81CNSfNl\nLaQNA7xWdeUMPdyKquPZSrDirrkPJvkFoU1zR1STvM4t9YjYqltIDc6LcWZz\nQIk5x4J9X1pIlqFeVxzSnKITeW5U+gzq28mpovCoUMpnW6/gkOFCYlhqEbyZ\n/HtmOQ81vRGS1VkQXICWrtErbh3A184V6QDKjRyfGkw9USDXV4OfybPDXB5M\nVnWo\r\n=E262\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp7DSZx8BXeUpd6gYMoncov4vumUvimfITWQz9RKPB4wIhAPjjg2V5gvTwUDuE51eABAoaLI5Kk5pcAaEodsYh4k2n"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.aa2b40bb.0_1590693300216_0.33492013165548906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-button","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-icon":"0.16.0-canary.1a870a01.0","@material/mwc-ripple":"0.16.0-canary.1a870a01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-h1uGv1YtiFJFyxrXSfoEBN6wu/o+lT078dLqd6n6HkSGi3kAVeqZnHfuLQqLz7tl7m4MSTIdmMoEQNMrzP6dhw==","shasum":"28a79905310830ceb9204663816d88eed0d998cf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CqsCRA9TVsSAnZWagAArEcP/2DTATiHRh5PYFjYqatm\n4nVf5fsLz96hFu4aBcL/bCz1PH0lXzHUnlsT0MFMARY7iiu5JqF2cZmnIg3C\npg2KA5eKnmeZ87DBKRHEdFETX5dK74ZAFePJ97RinQgtZkCZgjGN62Mbarak\nsqSgZ8H1gtl4XzmY3wpLmVOau4PLFDRE1O0KwNlHTKYBUgzm0DSbVF7mGAbK\nqA7IlLBvgL9AQPKXLJWN7C8tgdt7DjfEVpAMPB9fsmwbSQJ6R7ajc6yq1yeT\nYHy1zy8JhgXHvurwiglLdA+BPzIjy/pcGa3akPluods1w4P98maj7/rNaEEE\nmK3XS0FrFnyt1yeSCLwlXTC4VuB7GWP/fsZH3btZK5RFO/ye0x3nHazsWH8W\n6ALgyxgjjerFJeL91yDHbkmwqBdaGcIRZ9DONVWAU4bFXtI6HyiUQFK9Vsho\nOr6hO41SE12wRfs1f8Hw5QYWPl5lsarYSK1sri8x39hnXwLGu3rRqzDjUNA2\nLxAf/4hDN+kqLqW407L6gQf7QgV3pn3LMVAu+G7YY6kkVB48etIwU0S99rEq\n2a02tZDvZr+BMaEan3aSpcxb1YrZEr/SdsBBf9gfb6x0nOSX85tyFJX+DsmJ\nxiA8Tpp3DLmb63JFP4WJ36w16b4O4GAZrm0r08UMFbWDXeWPjpCLuQ16nIvD\n0fZa\r\n=wUdu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAPcblDrMAp7p7xG56ZlEeAqwhCkNBi0QVwL+/2ufL7mAiEA+1mpr5hyELYSn1OHQONYWPXVYHH6lRpRL/f8JuC9pHo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.1a870a01.0_1590700716329_0.767347690943545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-button","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.d66d22bf9.0","@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-icon":"0.16.0-canary.ad57d086.0","@material/mwc-ripple":"0.16.0-canary.ad57d086.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nhvKxkayiz7LWZswoXepLHGsu5EQ3KmrZrSByJCrHDXTWjThJ4dTy+HnzXb390eR41i/ypP2ta3d8OxtTsdjjw==","shasum":"4526c2a604ef461f247f61e0f860c93033689a91","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":78584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z90CRA9TVsSAnZWagAADmwQAJguEDYB58df6o+cOu53\n/euSvClPooAQmy+Tiy6bEquhTmnOmEr1Zlz/+CLyq+d+rS/NJwnufFJ6ZXyY\npLI39f9OM9/qmKql/fcbMrReEdZREiUC9cB7M3oMoSMNx8d73pITVQR1kzhx\nIsckbmygjwWEyG38Nbvr0++ByMZf1Moa1N+fyx/lVMUbcoVMg/j6uLVu5ahv\nDsW/LPSkmZCq7Efl9EcCxm1h/TTIBNO1AwdjAYLq3BI4fUIRgbjOWDGxYgZi\n6+a5CKwiCwMHJidt59z/tSQ9ekTAe/Mj0XW2t8S+G+P6sN6P/47bPYVzfOI6\nX5WkrisI1JKE02LKejZlHEAcXn3+JhgQ4kJw0i5nS4ibpeosEky0lgZ1zc6q\nJSKgDzNMOw4d7nMeYEQdksMpAkfhg6Ta6OU3mCwNfcfIzJv2YRiYKQCU42Zu\nHpGiy8hwGRMY3poOmlCq+PrCCTnbED18NT1k2gCGPyT0GgElM8b+9dtKgfpb\nlZq8/q8IpwEzDSfWtloZrdgGWjzh+7rUN4J+t1aMc8ALOeugFQUtObp7b+w/\nGWCjp/51fQhPu3bnvEwLLJk5tylXl1EKFCY3/O3lS5c2dSf2++4GZkrJggBO\nMDdSFbMEeMXfNTEZWHCssikPjn4CJjykILhna0mcOy0P8wWe3u1O3rFCCMDo\n5RMY\r\n=Fbb8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpB3BGJQzjBlgWlamj+8b8wASVammtDjQuOuef1DwHtwIgQIBdyOijmBd3PuEAXi/zMazeELj9atWIiHLYWj+cIDE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.ad57d086.0_1590796148427_0.5928034714304671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-button","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-icon":"0.16.0-canary.3bf2b4d5.0","@material/mwc-ripple":"0.16.0-canary.3bf2b4d5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/ejD08W5EjCy/xBOSLWkWhjsXRmTBWKB50HUYSEsik+Gwaod+wTmbDTy1Hv+kFYARwbz3uS6YwKGmFYpKmI3kw==","shasum":"e294aff58e129fb7cd3e65b4fd7c986fd58fb754","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":78842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqVCRA9TVsSAnZWagAAUqEP/1cYDt8qwKxeJmqPSXYA\nGKWao4HAgHoi5QVsGSkcMkCXSvJMER3SaGVC2Rm2qemqn6OHjUCBDE101xYm\nZgzCqr/AX+zB1pPUMhIP8Lwx/X0X0cmKDWBJ7JpowqiBSAO5QUd9OHUJvqqK\nSGCxj8x3lPht5WnQNrEnSOmjXQKOPnG7VYVFl7dJ/5470vrCKKfjaYwybAQq\nkdILzG3Dl8s87GVjNFJZycJyv10KufACty5hfL+aRSDX17ODhkGjqM2/ZMT5\ncbShBUBmUPUOTGE/Y8qRyOCw8CbB6Q8ciyCfPjzQ9BnVIvoRbzdN7LvyEJm3\npGuPcOjmT2PjED8C6lQTDhoErTkY1DEZk0A4fInjeAzi+FYhwQRSPdgR/P3V\nQLCtLFbgmJ3Mzf3re/976bERDu4DW1/ria6oT8CFkzF5SnI+pDAmSFTCgD4k\nNeQqKaXFu5a495XFdSDTMAHV6cFDBiK61ls0UF8vzEtNRdQjAymFoSACjRus\n36turkhm4mVow842zhscF58ILSlAIqJFJ7LYDZVxvEo8Qhqm6SGkc9IdBftW\n7h6gFB5bv4OB/mm8Oh1EAHSUMGo3hqru5+u9CuAFK3PdU2RUOk0O0wLYLicH\nxpgbcv5UQ82UfjWNATEOywyIs+ALAWeCkNpHGJXbkCnVXPa9YAsnzM4H1jQy\nU6x+\r\n=piGy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF8uv0BxJ5BEsK9TmPELbMv6vRZ4moNU0F3g3kHHLBAqAiEAkJ+sBArwaG0JuAsuGXAxJ4EFvf9mrMvRSoIndZk+CkA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.3bf2b4d5.0_1590798997207_0.6264425499917194"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-button","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-icon":"0.16.0-canary.ac05f090.0","@material/mwc-ripple":"0.16.0-canary.ac05f090.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-53ISj2Mriglten1fkPdgXMCTuSYkLXU7SBpxNftJtMXjNeYN3lfXTgoJALiYmbvsnfSs+oi2XmHEySGPNNLRDA==","shasum":"483686a6910bcd69c6360d3023a48ddb7dd47f0c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":78842,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnKCRA9TVsSAnZWagAAGN0P/ArCwAsLN1HrLOkfHPEm\nB/EacbB7qRek8b65TRKm1y1AKQ4ZS540qU1RYGluCWbEerZpMd5IqLiTwPO7\nNjfBL7aJpJJzccfHJkbZaR/646LSOCARGX+ZmlTQTbHFhPdShnOq20Cilzak\n0nrGIr66DCoL3K6J57sUnFUJFVsAP6m8oB0YnReKhwRa84QYtVlgHhhtJX8b\nQdzsMx5tVaUeSYSP9GJSQ087jmPKpjwUwT1Hm/B/lzpnI70d33ClsAdgGqPe\n531Bj7XJN8gJIQfeE5wIIwVsjXbt9V+YvkEFSumxWtNIvZ4WZOn2foHNmhV7\ny+FxoMrlCgtL0bJTomHB0ZCAXUFbLO8Eo6ev2JkxZg+PrkzDVMXRB2lBobR6\n9V9E710xqpvvRl/JndtgU2Lpwdz2FzXJNSFSYu28ZMLKbRUznpZFh8advvDF\nXUzkdUEHVSdJEzIuyOlEh90+z8fhk4IE4Ok1b6ISYT0YSkz/HsFrqHCLGDzQ\n9ipYsatbKBj/8FZSLT8qzYsw1nBg3sWgxJ9u/cA4VNKwKFPjQzQ/xQFEH87I\nB3eTphc2DlqlFZceRQxsPE+d3xzbv6F/SPOVrrB7+tPHGwG85SBYY7mpZJni\nfMOgQfTR1vwbgE6EkFMc1lQHEMdRmgc3T6w19kY52yNhNt/olvjhhOHDZtMY\nry9y\r\n=ypAS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWkMeKI8ou15qz9/jzIs+A8AKXWoBRhMhT3xsGIEujiQIhAKJRWj4tvrEj6fVTgJQmJMo9tboc6SSYh34u/XooTnBE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.ac05f090.0_1590806986308_0.1270358885592786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-button","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.8073a20a9.0","@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-icon":"0.16.0-canary.0ba7b095.0","@material/mwc-ripple":"0.16.0-canary.0ba7b095.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GA0USp27lYKuQIEDOGhW4R6kbbYx4bp9TAHTHZCCgJZTgtpQi1P++uFZuG3APCcIXmx4y4jhm+8mrJm/v71ipg==","shasum":"df5883ddf1ead2b4608229417e33b0a4edb6e7b7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":78669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctdCRA9TVsSAnZWagAAAD8QAKEd1rlmJ9DLzxHk760D\n00yJM/RoyNQhgrh0NhYQVyD1YqIOTRSqGOHzTzlpJWNxHQjKB7zGcdsxlTlM\nNKnxxLdOgr4udFsoiVOB1qBmMXacRo9Zbg0KNGalQ8nDWrF0XKlcsVjVeGJR\nZ6dNn1UiKsWy+G6zCGm7BpwpPUQ8cCvogqe0uzkkPxO6K2N9VmbcX9s1V4SA\nmyPgwLkhb2U4u457+t1EMpdwFxxhtmaUB/OFPdLVOE9bI9hV/hRyC3PtahHO\npY/W38UQoc6c+WrVopJwSPD04w8PPACOL6m7Y3rtNNom0ASYPZxJy0U/OL4Q\nH1J1427oO2OWEUIJkCLuz4SXKFs69lr/UpomLPba09vO79LA6R6D1hvwadKw\nDiT816qMBSU40ycphcJL1wpSYx+r2P35WImwwPiPho8NPCVSsZUkGnOIBsgX\nXCiRAUTIkSUur9TBNJdz3Ier4jIqiRPLcWfs7ljV0j55cept/PGL8Hl8t6gf\nMm9kaoTRVXj0rWEc96fhgH/5xnA4hrtcaGBZ+oXW5Kz23dncfhBMa+zXMFzh\nNfED5CggHs/CIVRFwZc85k+7a9smRwoG5A4uitnrWAvkHv7AqRdAZ4cGgZPI\nLMKZAKs720S7z70i20UL8pbkerRR4iwpVQb3uNLw0hBK20a/S6q4tL1BQFRj\nkWtx\r\n=DL+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB3EUF5moXplQ+nK4Rtq1drsfNMflTke70x/Z19S/9OIAiAcFC6bcD1VkW0ZFft8YbhS0ApQ76w799fo2gBSFnvCnA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.0ba7b095.0_1590807389023_0.5671803014160364"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-button","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"Apache-2.0","dependencies":{"@material/button":"=7.0.0-canary.b9776b1d0.0","@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-icon":"0.16.0-canary.5eaa9bac.0","@material/mwc-ripple":"0.16.0-canary.5eaa9bac.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hIDjzS/hpzzA6tSMfxkV9cb0h2Ih6/E+KtxOrEIlcnYpCIs5igWXQgVgbWpYpLDexu63JAGbEJr1tvRpxfNzaA==","shasum":"829919b7f1d9e6cd3fd1f736ed065097da7b5018","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":78669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y8yCRA9TVsSAnZWagAAChcP/RaK9G0LhjwkYf/gUCxC\nKVe+QWbZzw/oqlAzg85M3w2SNEjVX76yUkdG2I3ynZDfmdd7EkIzR0dAlIvl\nGIKmafiPYcAb/UE1iFBKFxfwSQYbykboMSn6NN5mQ40kZ9odk1ICxKrrc5tv\nFFowFzxJIBNrVf8IfBKUwFaWXZ3utxMF+3p7rGau3mhPgPdLtHMvN3m7wMan\nO5bZTYkx2CuCOwOZe/RA/so/jZOvCswg9/HaX1X8eTvGMsBo1bmwSSHn9CNH\nuwwoPVD4sLx8XLydRWsYxw1+GK0QozvjdQmLir/PMvDcHhpl4Rikd+w03AQw\n3eWypHw9KpCya582WSVyMK4xgghhz5ac5MkZhiLd8MiNha/O+KUuicsMVnSF\nCDzeMHs3WEwfykVPCtoGZQH7tHko7ViN75KzrKwFu7qaPexfubkwHENMN+MC\nnwPUkeiyUM40J6y3iH9S+HhBeN716LKshn9Xydp8EYj2hUEr7BpNs4OdSoKO\ndOMtdPWwGAbQSfijV11gTYhnyrMe+vAmc9oTmjHZ4c0kQQ/WpI5Cr2wkMwXE\nZpeJKjcdw4wpXp+fXdESi48IczWA7rHw6+EnG/WflsExENpTiRjLnYm0au1p\nxs0gEXSHHF0p+ku9s072hK92DQ/ErEMohAYHj41mT6C1044l1/67oMBM5J5U\nh4w/\r\n=l79j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDanx/4Vptk1DjHGe4FevrrgaScQjiHFTeiu6BIlz2+zQIgZuzx9gb3ZDvXRlpNNQYqi7Nx9FV/b7fXeGRJebJAWCQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.5eaa9bac.0_1591054129901_0.03637014840937991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-button","version":"0.16.0-canary.5677ac20.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.5677ac20.0","@material/mwc-ripple":"0.16.0-canary.5677ac20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cUxHt6kiUTb1F8duDMIYYFqBu1jIeblIARnojMDdYZ9dFegA/19oyyP2xW47K0ZvyPZAeEUFjEE7Us8k/896Aw==","shasum":"d579ebc500e936dc0cd154927fb25da040d0af18","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXZCRA9TVsSAnZWagAAHkwQAJSBgG4c+SkKVgTOTSBW\nnJX91ooRzFMzzwozPgHcn38KBydP18oXft00d3GBoOZv0+SDxT6BW5f3Ckfs\nk5HaH1k2OijZitWLMV5nsIIhCo9fpoiJtmcCvSjP4d7Mllmp1pOadcuZu/1A\ntZQpRiZizfOUD32TyXW3GIK67NZ51O3oo6KBu/nkGCc9rKBXFkoz92zXfFkA\n5YRAx/fU240A8R2sLzMP8en6Mr/s2KP9KiplBzk4j6OuY7Al1HuViU22oUVh\nwzsnceBhVs8ud5uvvrsb075QzoPDRlkEU2fsHJCfecuAVItcNalzqoHg0PyE\n17NunJjZ+jNSV4Nfw+u1LXh8WEchtXObYFX2U4+HuTUCSFeA28bCcJ/CF2tx\nV2X6LqNC96KVVW7wKG3+bpxeL/mFni1czIcBgOdTRriBzsTloavZaM3ZsYlm\ndCtd/pbtop8p0yrrsnzHkwY4tTZ1NFyVo7nVwUA8W5HJ68pfRCayAKM0PSat\n3yIud9aXYG6yx5p+dcIxHatBUanbMj79lPDQbkxzd9DgGaokl0TvHKbjsOWW\n4bRIJGyz/2KRryBS3Gqx0OJYQ/uUT6ecFQKB+WvmoF0zmZDOAsqAjmgu+b1C\n4jLFAJnI9d5myD5buly4BugALr7dWm4r9KoinS7qvQK9lcNFH3fmK6iua2xN\nIw3w\r\n=oz84\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnqsMSBZWB6+sAjbsm6Ia/hSHqOCN/pLUBxE4ZBLJXvQIhAP0tC/dO8SIIK4I58/zEp5uCd36cvXy62/GhzHGIoELh"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.5677ac20.0_1591055833186_0.9372370055992965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-button","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.7ac6bff4.0","@material/mwc-ripple":"0.16.0-canary.7ac6bff4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-iSgeGDijmYW4hwj92D21V4/ckN4Jw7mZiH+xrCs57MLILnJA8yIDvjZnhubnDgazPgePlMPQucMgAtNThhiIWg==","shasum":"a1110ba1b1d9e1fc2a554f823db0b38b104f6858","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZorCRA9TVsSAnZWagAAyQgP/jHURmMkXWpmxX60TSSJ\nUxk3z14HiHVZrvtIb6NtAAtp/XoHQY3wc4g4Wy0UryF+84xL67yT29hIcK0m\n1IiXoplnsd6qAzFJPuOOd6hh8TyA9Kd4Fq/FEgwaARd5dggwuvK0uqSGgXY5\n/FTajyuMKk+S1qW3ck9OXBuhA65c+TEXZrbm6I5BLdrCUnrB1VyfIoom0me3\nLAO8x3HGPnoXej6OA1Yp7gAgoIUhJkJgTHnuXztDRa/UC06QWiIanYioncnl\nQjM3W24nPzbrFXejTKEJp7sq2Bb1vXKXo04MN+bXu7j0YVeRZ+E5F4Q0DZWe\ncgSQE+rRPDpneIRh2/V3bu3I/73CqCw04FkM2bNGPKk3tyfPHD5Pyo2Ojwdd\nd95NxuAOOBLYobLDjMfL18fAL4Sg+DXIGpdaDn5ReIZY5iBL5+FZD8fraqbj\n7tnQsStuqJBdQ/qo7VgYmCZ1TLlzClOED55leuOUa0nzc+C6S6a03IqCEB0u\nkpvMBLZon4Kx3yBr1Llz6Mdc9Q3/MZS3YfOefLc5zg/WRWactfe+Nr6C3fF6\nADnWOGoldP3340IuI/lLry7IbsWd3w6OylYfijJJ09QuiVXRYYG4/WiVK6Qg\nSvEg22dnCmEoR2owU9g0EUVrbZFsQHikfe0xqFP2W2lCNBKdP4/TyYTEt1az\nsho0\r\n=CrgH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/cayAyHPptSb1QXoGz+Zs6GszTHVgw9zeeOsIJHr73AiEApZmiIwAHZBZm3gibaQQfYbnfPHuzY94OMFFXb/7ZW98="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.7ac6bff4.0_1591056938646_0.5222478789335652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-button","version":"0.16.0-canary.d45622aa.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.d45622aa.0","@material/mwc-ripple":"0.16.0-canary.d45622aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"=7.0.0-canary.b9776b1d0.0","@material/theme":"=7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-d2PBBFJoAZhbGz4zbTDIHowI26lAYpKnEbXqYpPOoqejytZZaudyUtCa27wmVybOv6XR6LqPQSledu2Wk17ctg==","shasum":"0bf6bf044d98581f8ca78228fe76477c8a60f0be","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uStCRA9TVsSAnZWagAA5Q4P+gJFdSkBHGkYo78QOILc\nd+Qqi+P+AqaNNjFGwqeyMuOFZYlv9VImRyf28jWsomr/uLfDZNYkHqZcwRoC\nLg+1bbSL8kVGLVvFJseuCfI0UsWpLv5lgkw8iQYzOCPLi2I4JHRMaj8WBui3\no9niKhS46U9hD546iTsDiA6DHtkVKE3AzCOIil62S8TYnQRuYkJ/vsogoqGT\n66PDxR32EtvJxGjPaqYoXRZe3ETRAtGdU5/hSsyFIq9gk+rvLgcn4qV3/hgv\nzP8FhPHPzPT0OEktVYljvvS2DkU7L7P1gYZPptGlEljSOM/hGJXxdda1Xhz9\nRXw1RRRqI4ko0TZJ0BRQU0VM6hUYf777UA53xeAei9BlfIYGzN64LcwS8rrC\nRX7m0U4VgQ1aq42yCB5UftX/P+lGi25ILBGEVSEiA4LnjfQw84aDCSK7GnKu\nn3LJd3PyILFAAlyiUbdOKLnzKj5vXxCbZ3lyaJ3a0TIl9zFESbGAETJSQnKE\nmpQS5JELHFL1hiPGAEH9ydkFKF5ZWwY3nnWX7TKzmqKVU7mzQ5EfI0P/31MT\nCSiDq0oOEm3nyjDdogSSdcjL4Zqmxm2FwtehZg7R4rX8VX4qtjRRFAROuOQ3\ns3fUlLktERV3l44a8c18laGFwApY7LcIV8EZ3tUUn1e30PnDyefMnGprx6gu\nKLoD\r\n=XXNx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQVWN0DHi6MbNNyf69Lb0iPCB669SXnUfXZ9wpgUSMOAiBzIahHf8Y0IAlhtYiFeIbidRT+RhthShPRPfX3ePPcPQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.d45622aa.0_1591141549321_0.8512069718600537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-button","version":"0.16.0-canary.dc26c709.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.dc26c709.0","@material/mwc-ripple":"0.16.0-canary.dc26c709.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-+dBkqZ/eqDZKfjBIuRKP3k1dDSRJg4x9q/zu86mQzrcOix+Ctb/EEpy23q6n83GnM+gJaegClQ3eTsuQBIP6Mg==","shasum":"f722cd8ffda66f6a0452740b1ee2d67e04d0e72f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qkuCRA9TVsSAnZWagAANQEP/2XATCLQ3LhLJVrlOcfZ\nu9xXuhuyJHzMHE+eFktoEZfm+rPWEPeFfAOoba/rPrZpGHndMNzCC7SRb5s+\n44EmAUX7epPsqbDMR3NSSC1sgTWWIznk6aYB05yFrF0RjCTJvKZhpmiTfmU2\nq95m0qnehaVvEoIfJC39PW8AjuUUoRt3EumYdprwP+VNOzJuyoTq4K+gevcZ\nnoNhQd50/GsSKlvNIK9rgF643HBsqi3ABPjXgfn5sodPtKkg0Gfa38Rx+XI7\n718oe/jxNYiK0NcLkKOArUkKjbDbqJoDgpJOqCsP/vUeamLctr9XoyVOPKoI\nO8XLYG7cFdSG+8o28HCrqY/cM+hzQNLBIDeOXOSA87a23yr2QuGuKvkRgFwl\nQI2yG4WxaOLI5aKaQAIvkp88sUQ8DxVVbWsK1b1a9CS9UVOfqfjfRO30ctFM\nsiPugOCbGAW66/6MLM4lNCl4d27v9gbCDG+1tnPlTjkf6TwIbzPyRWjSrC6n\nV5aWRjr6Nx7Dw2zmlX08i04vQInHZnY1cxNSkNAjahBkkJ4TuZiBuufHYo3p\n1JBS86D9R3YA/n9wdXQrlnNPOv0tyyhZx4IyRLH5BnLXDC+WkTkZbTZdkmEb\niVEiYMKRRkcTDCRPOBHbRsqQHa00wPm0wa1SGcWOgrEWGgnwKEiyDyJIcO+I\nPj8O\r\n=wtpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD05i/ZoSKbmf7/7eGtT1KYmgStVslibpenDN3KZkfc9gIgcV0beaEuadaACrj2zgAI7BeVr6l5OqULUfq1bcDzx5E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.dc26c709.0_1591388462149_0.8976490080248869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-button","version":"0.16.0-canary.b9baf6db.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.b9baf6db.0","@material/mwc-ripple":"0.16.0-canary.b9baf6db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AZAOfkkeDo42VM54vGqtPfMBnI2c4fdNdIVdDaWfxpODC3IrZXWAzcYNSxglDbiW/090IhSpkdicVcQIfagkCg==","shasum":"65d385452b804c5a02027ddc250b0f62b2cba2a3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2ql/CRA9TVsSAnZWagAAocYP/R/kZEWDxukaIZqPRP7k\nbgfoL3KWSBM/TAaDfIKcC6hhaXxB15IrKoszmfVGzgvtJgigb7Eeb0qRO65k\n0jXyMmN11saGpaBDLpfdwMWrnVEA3AMFkDt2o+RsPjdRux18qywW6d1MSQ9b\noE6MSgDzOTdv2hcpFhjL55hZ3acPs4DgUv/raw9KSFERgELK/e4mlSCTbLjL\nlCo00ZDT2pKqRTzLWdEQwaTt7SWRIt+T3khaHaG+ekrdxrTxdCISWFAzfLBw\naDQxMei21xREHdQEAH9IXOt269WYbAOKUTFxCvP0P9ECMDyy+D5KSHjd2LEC\nCN+41ZPIq10SxeU1nYYwv1vIrNMukK6t3rTQLmu3rYenwoWTSUIbl9hadw9g\n8lr8wu0kRZ442TlE6zxdbjP2EnLyI3FRQ8YzIrpRLb/xAUquSi5EUHPlI+jF\nGFdP+lrFQCzz1nE4BWZwI5s/+JCkFtNX++gkoOynyACHL+oasHiqG6o0fRXD\nmVbtrd7KLSncmYYV8KQMpCd8QS61IYfhPUBUhU8gu7ECYbmtlsTg6tDbSbDf\n20s7jAd8XnVFSd+K9G8pNRHBr0UPOrqc9EEYuyVILcAK+rkk4AoMh1vLnAw0\nvD8ZQfd8Lk1zsrpsk8bepaNjepsc9w94JLIL2th3AdGINI7RuiBsEJe3rZDo\nLWsm\r\n=hvQP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWXSDK73GYobL8wWX3Hq2UWYcgUC/GtHqHc5zc2ukxUAIhAIspKLRTu7RGSVQnEgkV6OUInudN270W1k4E5F9dXhtc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.b9baf6db.0_1591388543337_0.2707048952522422"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-button","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.e0b8c9d0.0","@material/mwc-ripple":"0.16.0-canary.e0b8c9d0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"=7.0.0-canary.a0dc2b5c4.0","@material/theme":"=7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gBtza8gitiSIJoq2S4YvNwS2kITr553bOYXYXRDk4vyzxYWxHcB2+c9AS4VvScH1rMdUSzM3SNl6Erv4RZrjAQ==","shasum":"526affd2287a4abec8e4c957cb34828d18c8a0d6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+KCRA9TVsSAnZWagAASnwQAJctaG0J9vLrb3HU8YE8\nIUO2AdYuAZrm43VFUT0RGPvNDThYwb2n4+SUlXRpf0Skd3uVVFQz20pkn5Y4\n2g96BXi0ypxFqRbVaOKpvKU6+VKwHVVk1JhRKuCCJUAwTfbrLUO2bL6SdvKx\n2VFS7qyd0/LQY5bydZniKTl9ewLoYPrjNMpEy6RDGw/CjRtm4HrZtr9lWRWN\nTosC4MwBu3FL+ILpB2al+bSX8Uhmro/07dvpS0/aKGs1g7vsocTGxRYuzYAT\neJtMjneQx7DixPfe09dB1bCf2ZDv0gTJiK244z4aDlba5DUzJ3UESSZDUkt+\nyPVZLKKUvw4bHdK9Wrs0rSRhV3MpjKapnEBXCYtlL64NMd7YeaU54vi6WbAI\nYGBi1BqADpAAf7rXF+30S0ED0V/vdXXsmnGZ4/hbjcDipnftXx1pKLSBwNVb\nVJHeQggNPD7VrmmG5UsmhKhjW4/a1ZVykgy6GMUZN2nxAmnzDxUAtY6KBKJv\ntaUW3NC8kGSg5JJfFIGKb/NfEin2ZuIH+QFaQOv0Jcl+T+D857Iatxmw3MIO\n+5wVQsxUwkyuyMpPVRycmyMBa3+GV167Hq6gFUWIEbXdqc0D33qR5jW4szmh\n9gij9apOIyxrKK6Ol04zk17LZdOkNqF782es8h/f90S5QgPULN3I3PFky+M3\nRqeG\r\n=UXvT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV15716LAP1buy+uatJ1dqJux0+QrF5C/7Nb2jfJUKmwIgVzNSzM0X6eQMoSEsKgRf1CaY89m5CqolUa7fSHv/Qtk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.e0b8c9d0.0_1591398282170_0.5686435625411181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-button","version":"0.16.0-canary.51552859.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.51552859.0","@material/mwc-ripple":"0.16.0-canary.51552859.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zfpY9edZLF592fqz7CAvYRx81PdKvhU6tedaFzfBsm9KysfzbbkXR8UfNUO1+yJiHk+GeazDh2nHLQgEd5gMEQ==","shasum":"170119f331b4f23f94a9386e6a9631f0176e7ee2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CRiCRA9TVsSAnZWagAAC88P/2ROi9l4h5aOdNn/RPZf\n2A0TIUOM9hXw8EzlfKeVYTAuekkI/Kaf2zdST2sjG69yVl21jcqOUKYRIcrN\nvK3E4U5Luda636X3l6wcHn8b4Ilar1821DGVsFneBDtL//UsxyBgn0muaL5U\nWfzh7olnc9IpyyA00QRZu3DDx2E01WKKxbRMukEZ5RtXRBaEOl/UH7cIZ/gt\nRsVZYR4gN4mk0cN8aW5Sb5vaCOutSUgbXFMrlz06zxDPzfuyYzA6bYO+WWNL\n/tAKDVet0mD2B7Itjd2oYwPOzQr6dqjHeUZHFfFn7yf7uzYUL8jGFJr9NtAX\nx5k39MPTThoumXqRm85R2DuvIomEAwveBLzv0mL3ph0TSlYAghEDWyXrj51B\nFXjPRf6mdN2sHGgEJ6irKkGTME25Qwa86MEaOVp0Vb3DNU/Wn/IIKGhI3BVY\nKI4aPe5Ve2KgIy5gc1XkgfkSATYPs/6P8bhbvbAeyHiTVD/FRKkorsWNZv4e\nJwEruYRuxGcMtTNSmgUSwtMJxLu0UPUkAdfQ1y3nTNK/d1feB7l9MLjDYTUX\nPiydcVjDGg6b3fv6VBvi7ZK9bzntx/pSxJSx6xTj+IHYd0NRSeC0g8XKAsjv\nf8wPtzqFeMxpUREbophdydAuFN7dO7C6PBHIRg2JcfyqG174zwMATdl4dzeY\nzQCP\r\n=SdVK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKU2Tr08NLeSN5JFo2eC1eIr+4+h0jUxE8p4fIdYjnGAiEAn9dvmKfNAWguHHQ13hbnYNYAYfeOSRgOUSZuTuk/IjQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.51552859.0_1591747682249_0.904386563780498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-button","version":"0.16.0-canary.2e269285.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.2e269285.0","@material/mwc-ripple":"0.16.0-canary.2e269285.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hqv9J/g12NPm+r2hF0TJ1+fu+BOvTerapS/DTx0yG0bw/dCA2XyHNwjWH6uMjTiXbSEJBGSiPGxTuWViEydc6w==","shasum":"1c6998061a818c69243b5a523dd930ef60dce4a6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DjvCRA9TVsSAnZWagAAYCkP+QHTW8Dp1dPNs3YShn+p\nNoE3lmst2TpRf+sD4cozHd6WgF91r+soCHZwPtudkHLyug2WDCCGTRitZ5HQ\nLsAJVT8sQl1/RKhE01fD5Ca4GwqkXF9N9hYcE0kQBUcTuj20pHOY9yZ1On3S\nB1LlD2nBajbrYFbVdu6Cmp2thnSY4RDGWqcx5JwpgZdEQbtg6syzN+prnXad\nrA9ea1M0UQ/AgG0PEcfWLqsi2ijUj4TuKb9/NqNXIYQkYXPzfgTMuUFbiIyI\nV6XBbKrwiBOlBvoXhL+mFLCncnTb1LwoOzxGr7BH7T0uQP5QcrUlyipRUv96\nEZNZYbWyFMVXB4Pwqa+Q70/nUXLacGOdnA/CIRu0AwRNTNbSCgL2XUTjt3tb\nz67y2eJqZSu1UMwv0olUFK6QYxjT4erwQJy4tIyGDo3gS6pSn5LCTirk5sxW\nV2VD4//bnQoaclvJcpkO/b7hjTXB27uUApeTyfuChPUQtyYdyhf3SPW3Idao\nA9KAuMiP27PTA/WS5Q8T2LZY5MTeoEEVtpvwyOSFUEN84zMWr/BenpeN6n1X\ngR1nEC/UfRbaNTqah9BT8oVGv5d7dE/W+JmqTFwwDBlUYZOgBI+cr01SveDQ\nPXwS2WgVIXJ/H71Y+ieoYpNjwi9J5zsdOd9gEFkb4DPyVNp9ArWRiONLCkOS\nqv19\r\n=S7Nx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsouN4E11yit/CkkIYp/RCYBEpKB85ZSu6nl3qfRKMcAiAoSsTfXrtnFO0Yl7qCmp/Yo99iuG5baUWBzdG+3oWSaQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.2e269285.0_1591752942669_0.7817547488694869"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-button","version":"0.16.0-canary.be138b01.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.be138b01.0","@material/mwc-ripple":"0.16.0-canary.be138b01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"=7.0.0-canary.39e6f71e2.0","@material/theme":"=7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sYc+5sreXfVHdLCbpev8A6+kxYrdoQhTN2PZuGglpFSnwL6wgTTftnDg3Gexw2XudxTLXv6DppyLj1eWw46slQ==","shasum":"982568eb7a4d9a94ac93ee84af68426800f61063","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdBCRA9TVsSAnZWagAA0FIP/RHrEqjtEAfsocGiIyCy\nY6AKST/2HDj417vbF3CmiSzl8j/p1QJJrjLGUrRnOgqRxAODztYNduGCWUE3\nU79apMfixBzgWkZFsfjEZuLD1tXHDW+p3xGIE1Wu6IqY53TBZ0Ua0+2SHLe5\nXG2IYeNovefBiG+HIuasQgNpCtS5zHxyVb7JR+/Ae0jfxlYpdISS6cu8/c6N\nuGNabafOwSaikrrCoRiCCfT+wGvfkaOP5kiLJ7RZqBm1CYVcwLBB4fjkTcPs\n8h/YOpJbg9/KhGLJzhNleogjsbyFU7mDN/YFxLecD91KR+rROBYww4TEg8yk\nEkdFWyjgX+wPrLTrCb/Rc0yy/OVwCyaueIfdqvwbGeDdCU2nlLcy1j/3pYA9\n+6gh3prmyEt0Zub2KtoVf2zgn+m8DJXP5YLb5cqg9fQgG9qqhXsyEQeUlDCu\nz14xgnkuzDlTYmtmzppK1inkyhRuI7s+WoOGvG/19eXkA1kEeBY2XTkUzTRO\nsQRs+A0Tdqyx70orOSYsC2Mfvd6aWVKF/lFqFaI8c0iyctFs504h9kn6zY/p\nSRK3oQfI+VHTygwFuxJ3g0gWX1zrP6DEvPPLEgZNCsbF2XCH9Ew9V1iavaOu\nd4z4ptlfNtK9aGQLeQGtFBvpgLFYYxN81RGWsgy1R3tkoL1k+tlbA2ywm7su\nC7g2\r\n=7Sbs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC84m2fnVZ4/91MO/hXvXXlx2Mau9fSBLGO6m7Qt6O5uAIgIZtBIxyLWIp+vQsuTmGXiW2NjepqrHMq0ierOFlvOPM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.be138b01.0_1591822145239_0.15725870840231804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-button","version":"0.16.0-canary.04bccf5a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.04bccf5a.0","@material/mwc-ripple":"0.16.0-canary.04bccf5a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0ZFqMsbVCJjtWd72vLjEio3dlepcWOhW5AKuLdVmYUrASA/k1dYUDtdQgyJja0WI6fo+Vt4KjL1AOmjjhc8oIw==","shasum":"48f25e883507ba4ee042d47f7f33acde32227067","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BkyCRA9TVsSAnZWagAAv6oQAJB4BFmDs/JgnBm/m8Vz\nhCRgU/DXs7acC3wiV9I+nmpPkicQxKhYJASGDiQ4K9VI56jBQRj4UlKOXWea\n2R6uPey67CdvFA3gx+hvFDuZS74CQVJlo9vlIIa3ykVJZfXPtR7Beer2ohgd\nHw/nDNTXMTUlvtISPRqlIcEffbNxs35DrRZ/yMqDGJb/e3DkykR9eJQefd7S\nY1Ht6PShb8Ym4pBL2mMd3wfIHjlyZCgP7l/1CxezTTPXCu767lH9u4nteYr0\nZTwJJ7fKerA5QWR3oxdq/PeMVC7Le33YT+ogvHD99K/27ZWG3pFiR1elwDKz\noSzxUIZps4EOUZETtygvSUG38IO7U5AwaV5jkDdjbBvZ4XADU+5+wOhXue36\nveOBfn+72PNGdi4ERimjiFlWEb+0Ob5wDZuzykHLC2A8rJeV7oBOjL3+SnL5\n2uN1LIzEt+6esE50GpKeH0DOVchJeLThIZ8aHT8ZLWoAd+s7y1OdPcVMes1c\nVLQ8zN5sAnBUKltGuS6PgSLLhqfB0rsLWzuDFZUhTpNWJRiNqjRM9YutGReu\neZGXeWThoCUWLftwKF5Ta2r06BFQxzcMI3Rc+MEWStmsJTPCNyhQzk2X/jFF\n70cXHI1Iu5oYfRdTi6wAzIPIM7MIt4iFeqqi10DN2RGgPdOJBOOYyaShua9Z\njuaz\r\n=RfcY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGra29fkbVzOfogkHy9JgBuZNqecuKkWFomZ6Vn/JvWyAiBUP5+1e5SzGyOp+/frEdEO7g0DsVxdepq7G/xOVpARPQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.04bccf5a.0_1592269105732_0.5533133431943948"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-button","version":"0.16.0-canary.b44dea36.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.b44dea36.0","@material/mwc-ripple":"0.16.0-canary.b44dea36.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PEkS8fCPjiOVJPbZId6dcR1e1sGu7SqadqdAcesWJyuVNNMw/6Hq794wBQYmzy9m8QpZy1IPeJRRedf0GDK1nQ==","shasum":"1956362dcfb5c2c28b2d31c8628829ee60edc335","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJHCRA9TVsSAnZWagAAtTkP/RBD+Nu0Zfbp9HRc6uD9\nASfOxjSw5Ea1OrIpfnjXus5e7vMAaJU/wwWz6bN/XN/YXT6V0OaLXn/4ptm0\nyjBG8gGSy7mQidfJrW3iKi5JR4W7jviaNHEFj+uMkg/efevJK8qlDMjPHJLw\n8r5PCJ84rDZFC2hI3tmJPoZwSW8V0WoezBvI1kEU0z3+ZkaBMsRPEZHfjRhP\nu8coDoQ4O4HPVfkEQsbzJwYJqLc+Q2fsCe8TZwbJxN9LMvp6MsOeebm8GBS5\n9LbHhu5RQqjemhnWnWMYFhn4rdTrFuWs5DSO8jA8UGvmEIRKNAFR9QtrLCC9\nLghgESZ95rr45DHp+GguEQdeNb/Soqzwidw8XqgCacNbhcrgsW8BeU5ELRBe\nWpmuct/1b+ftg/zbIVfamlENf/+FVmz7E/9AlkP4yN6Qy1CW/rc2mIZmtoD2\nZPc5Gv11okSq3isf+HsarPSCkJv2M2wMsFwdyRb6bQi74fQ+cVdsPxh/eiGj\nGcLZyrQqoe3hcCN03Bmmcl8QWzve+W8uKGcWrUgP2D23s9JoBQRvJDhcQVcb\nMiJTcjfKX3sjJgZTieYVgYd3o62o3mjEEnbhESJW+SETI92cKG/6p1vKscSN\nVba+WUNKuSUC3MxjdBuN03SfGF5HCh/H6Fj9JXdSDKX0prFGLT/FwWDy+Blc\ns6ni\r\n=Vj/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2elvmp7Dwt3pRKpUb15xwQ6NdSSK26oro6I+pDby88AIhAOJRSszLVPhWrSpx0H/o038666IHUVXQZDSdFRy5r8NY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.b44dea36.0_1592341062465_0.2182968881194809"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-button","version":"0.16.0-canary.e2577e87.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.e2577e87.0","@material/mwc-ripple":"0.16.0-canary.e2577e87.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"=7.0.0-canary.a6ac8f629.0","@material/theme":"=7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LH1Jn1/Azq/r+BGDHwJgMh2wfxrEBKlU9erQ1PBTjug6IlCr/JCdjVue0FYTJsUFhrwak0zzZQoxbHnzp+ZaNQ==","shasum":"c166ff52b73bde0d623ea96794479cca52a48a89","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTYCRA9TVsSAnZWagAAt2oP/jVawZ7STslLATLk8uCq\nhlnUf4KcsEy+GHxmMZgTCW+/m0nCmQmUsgsG489v+nnslHTlvFd5svyzfgHY\nWOm/aTDDtR/eV/pKqbsXSHe3nggW9bSTN5qO3/h307P4O8tRrpEVlnhBnQiD\njbik6JH6A81RDj3IsM+ts/PLppWlmSmAtQLWRNQVQbPb88OsDSYn7WVxdn7H\npukiSEV9kZUtYXy88KufBd6ZLFyNhh43TxLTqljc8TRRR62fUFUXS3WBnnD3\nvSUFt+dmCxxocO3jKmlfgI/B9GjZqLkl/aWSjuG4ttDpeGR4dUOVfqFwpU1V\neu5SnAeDsj5WpFubUaf6JFaQm3viaoLz5KZ71xD/1E0mUIRn2XWXYNkrc1ow\nOrsuz7jDfUAkfBCcpYCuRXDirO3QPbtDqXbMEfB7VpU/82AK4s1YpCmGHdGE\nTQSqJxPXpZiDOZDUGby84rFfvS+14U9UhpECij1f83MpwakgiAuloRiyZSAH\nyYA6Yy/940vxKs33jtq6+uemNTPfx6e/VMsXagN83yzh2IauHwbFKHEul17C\njKWyCmTTqNEyZxeOnX/+r0u3Sp56Gb/ox3pRMELfEBE8bJQboe5W2Zkg3xYA\nvdbdHEbnrCenpuxCFjt+J0L4vi5toEKg1n94IrObF9cQHLPinS2yk7u2GJGd\niHaj\r\n=aADg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyk0zj8pCvG6x9MyklST3M3scQ0HwZI0SZzLOk1+u1fwIgJfyX8SVuKx/QpRgkvU7D7yGCfe5zOMgBPdlpxVAmRV4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.e2577e87.0_1592341720366_0.7725763105191756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-button","version":"0.16.0-canary.58b73343.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.58b73343.0","@material/mwc-ripple":"0.16.0-canary.58b73343.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.3aa33998e.0","@material/feature-targeting":"=7.0.0-canary.3aa33998e.0","@material/theme":"=7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qMzyST7Cl4JHMz0qfvIVEhC2Tc4UAurBTRtpPr0xgHUkNyvDvMkJYN9N4xtwRSBLXA49qqgi7ZAwaZeEfdVErw==","shasum":"d9dcb75867aabfee854fb061fb43a624ddf127cc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TheCRA9TVsSAnZWagAAvx4QAI7H73dPSjN4aD1X//BI\nIYNsphUPGKDKIugyUVjwD7zfC4mbDGiRs1Vf2k5acQa2803BwnzLtrs6EPXH\nR2ONg2ThdkDOfncvk/PsTsqvQZCvVkuce2KvCvHTaKpssjHVq+UiwCzk33ck\n3ibAm5B7cnZsd5QSZjV4+qtvabB0aGI3VFi/ngR2qOeJ2U7aSLhcDHYEVVvI\nIkPdIXpltMzoRQBT/GzWpPDN5PzQJStXAKXGcqc8rLm8NFnI87JQkj0g+cgh\n6ShQ0vW15JAqIKh8wgospJWp1cdfu0iCMqPPOCAlywE/UPLubxSr+KytThRx\ngWOm1/1XPn/yCQDDED6tHG2QnaXIsj0ZPVdjk+APtzb6krptI8unXFChF+QB\nTgouRS2W8mVVt90xlTdMgN5BLdZS77jZvPdzsFjhbKbQbKXMoNl2XqTYt480\nZ86lc4902glUbf0+RMQKC2aajZc03uqyubqMv93d8q8sohKeRdxhSM4inbaX\noXMFUiwmDhE1De8GsiDzGRrA8E0jcu//rpCpPSzNJyx5H+7uXnejsNSEN2tx\nLX/jaY7bf/tZq4mlNirjAJKVOJga4kpNz57uUFeg21UGgVZw6J9nDyLur7f6\n2paYhKoqtAX9zRlkJmiTD2ECo7KEUMoU6NjhJvUD2MLcyqfaJDxBbuAvv2Cf\nPigD\r\n=N9nT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHiCAmmu9ChEna5hhPlUGLEEHHTKVFNBi3vubfA56//+AiEAsBFyv9Qt14mwWR63d44bcmVIn8Ugn4vWqmr4YlFFVvA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.58b73343.0_1592342621542_0.4564416052855593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-button","version":"0.16.0-canary.f155c058.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.f155c058.0","@material/mwc-ripple":"0.16.0-canary.f155c058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.f2a488e95.0","@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jnWGYFA+Gs31P3CrmDcAMxcCouXVvm3ppJMNRyH8stnZzL6mAmpr/BZ6leNFEiO+OxCZMy+Q9dUNQcxgykThFw==","shasum":"5b77a859f049097166371b0b37d806ab0c7e8c79","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6611CRA9TVsSAnZWagAAfW8P/0d8WHi+0HPtKBNlU9Bn\n/JCyuH8Evw1ktDXeG1NNh6RMQZI3+JtuYMy4p3SqVal9GvD29pgyMmlfoRf4\n+0WcQ/aMTeuC/f8ri5OKi3fcrxM5zcLZzLFKa7K4BjoQ5jUW00aa/sJaoqNf\ndPhJLF+3dSL5ocxvKk/yRoYrX/9U3FQD0/uWT/fKdIk+pyVK/3e1SlhBZRMV\nKC2BRoeCPbMYiSz0wDUeyoYp9jAYt8ZARS3LSWT6q5pJ+m1Of1zuRu5olMlJ\n+mWZ4EHsi7YjU0kJY+I5VG4/d+CiIZqJjtjgSuMizaxqd5ZIF9y0x8P5FU94\nZWMDka3uLVXVhl8Wi5Hg73sQlqeuRwv9oVhoJjjteWsUQ67rM4ZyKfg8Zo8m\nhLYvqmYDoaoUYWA+9VIfEazBzVx2LeamqEPYZsYxknZHkzwxQ/WHFnc/esGW\nEbE292MdK7JR1eIhsl6fd9IX1P1NSRoOioJx1RA3+fvnO8Sh962UPVbTuHv3\ndA6jU0/EBXqfwfoU3QHlmSqs+8kEuUkE6ZxVPXf3fZg7HRrVdlLVX6B35drO\nwEUZYjJor6+tya9GfxtHjZvZlzqRFei77YM9PrGy8rXOK+ClA94uwfDxu0L5\neiMCZfmAp/R0ht9y9pHmy1z1rSNsnfr1maHBGyBKNsON08uT0+2L5WLtXIIL\nIn53\r\n=3gJQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAnzS0lMLk4NnCkNmJH74SZCqfjSsmHzy8VDA3XyK52wIhAIUEo9nEz3HkLQyGWLvNDEO+7oTroh3CPjr8Moy+kbKA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.f155c058.0_1592503669312_0.4298992715465202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-button","version":"0.16.0-canary.309779d2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.309779d2.0","@material/mwc-ripple":"0.16.0-canary.309779d2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.f2a488e95.0","@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GrQUVDjJgUwX0Yr6Hb20e5Vm3dqbq5zy9uL51vL6t36m8s9JjI37YTlZOAS6PHKUfT7TkP4cXrf4A1xa02CaOw==","shasum":"7b5f850e1bb8317fd9925de0cbd0411e85afed0e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+rCRA9TVsSAnZWagAAqeMP/3//OIQ1tJ2XnC8B252H\nXNgTLwlMCM4CWabe/5YOIiPV/mt3ma9b2gt1Ogy00xU+VHSXqyOp9G9PA2Ei\nDadcCbYQbN+1NRCVsXQ/ogyxfJ3ybA2lwSlr67+QC4akVo8d6VyDA10SnmIj\n/SCRNzgKGpqYsQD+r21TKbpjuLReSw7WuFnY1zxyeFusSjbgHd6pOyLh/glb\ne8yUBLbPcMkn3g59iYs8e1luWuFUbseBXENqxwE2gIh8VrPgHRF2e3hdeOQM\n/JxXSr+Z3q2iYhCMpw1Mu6FmOmXvzjHCuvgJdcyZ9OVUiH6Bbg1gH+XZUkLf\nu81tpiS1SDsTqln58TkmYimIw6eD6AbkAesdFZtYqSE5Y3QCGq/O37xhEZVX\nSQYkrYY8Oi/QyAhOyVaZO6+5CtFRNlpqU+5Sa37lvr/CaAIlpDH3JztCYSCB\nPE71Z8K/MuTvyiNcwNbtJFi4s2mihoJWOVTFpU7LDty0xx3NlgEvFiANrHJU\n+1qngfJr2o0sY03Pesy8j6gfyI6akCfmIAoGFMGdXAq0/tZ04dhwlE3tA/+A\nfRBF9bSpl9+pMmRS1uWRml42Wm+9fRJlVV4AdrZcKHuGq3ntFbfJ+XQmSpKA\n7fWg0dZqpvkz4P2vSowbEpMkSKHdj8E3/9UJuO54YpM64qM29hse217o/Y6P\nosub\r\n=xAZp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJQRQB/utq9skiVPRmkM7hCT6hwxiUwsxEXvtnn8KL3AiAKlPT+FBx4LYqrto+iXv56Rc5XIienVpwUqhmvMHDb0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.309779d2.0_1592524714938_0.5922966687588325"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-button","version":"0.16.0-canary.e7649968.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.e7649968.0","@material/mwc-ripple":"0.16.0-canary.e7649968.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.f2a488e95.0","@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ttf/fT/DqzRYLoCJTllezcD4m3NrRWBeYPXrYkLRoKw3agn8gjEGCR35t9953CH8VKqY8hgh8feoYXxJIdy+rg==","shasum":"aa0e4ba55709b2530dc028e07464b7f8dad83a41","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDcCRA9TVsSAnZWagAAYcQP/RJfltGw/vDKpGo8Emcz\nRaTBIAbGpOK8aGFZrzDVWrQcw0jKZbUy1dURaNCmlgapdeRu6HDSOX2v81WD\n+xqEM6ADMgLLQYZGZPwOl8x0YuJlV3YAwrRuR3NJCtCt9Ab+4e6UKqJk0f9C\nq+catxRj9/BbWrCNq45OQcEglli4S8zHImRmmvNr8r/zS21gIVXQhTfbEw91\nN9YwBUmAuEIg+8FGEkXfk6fowK+OXKWWoOzycNAiAou44wnADzLiUEGB1C4v\nzaLrZf31QcaqmPNv1q8kzzzeux2p3eo2Lw9xdc0yqWAv6V+gadQkkELstn6o\neGFwh+rfoTruW6fAw8BDEDEnzCciI3h4z0lnmOqi3vsXdrOlxvhlkjA3mChH\nhQVyynRQJR2cZcTlYHAqjH+m1AzLJOhWUk6zjM0C/t6HFzbqztImel3kRYwA\no4DHl/2CrmmcTtpjdJ0CpV+LdhtF8+HBZNn7ZZ/aULDADgNjHiZHrgO4U51t\n3DVC8nVchcRH1jPiLdI6lR/XR3vGkILUaVugbsUeL3aYa8aVkvHfjcmPYx77\nOTxCL268R9DLYsv0/OEbAFxElfzAs3XUKd6FrN2qmGOCA5KqX22gLiS+ZUeI\n/m6y7NX/ZTq/FsJRa0/TvXhQu2tBIYu/QoJhgH5Cr2yln/Qfr1d//dIDbJ3S\ntCt6\r\n=yHCp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6sZ+IbR9JRRhXFrarwFpNdMJghmpHQsxqNFytYq3x8gIgZdnxxZDzluq9KvmZO52i0rMiaob15bdqylmPrr+tLdo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.e7649968.0_1592602844107_0.21636465519393755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-button","version":"0.16.0-canary.8e21c78b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.8e21c78b.0","@material/mwc-ripple":"0.16.0-canary.8e21c78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.f2a488e95.0","@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W6e8ZjfxbauTGT4Uk8BKkbB6MwFXtbyOVbJ+9GC/ie2TiM6t4Key+wgaL/jj5VniwhYaoHM1KGHt4M2QkWaZOg==","shasum":"b3386e3aade48a539d32c9f24c73fe7525807124","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8In2CRA9TVsSAnZWagAAf8IP/1WBWuWxqkraB9p+8/Fu\nL8fLPOPBVK6x1LW5sKCj0nLMtBhKvbZ1Qwpk6EKbQ33MTPRwajVQkqmKPVCJ\nm34PCxH4T+C4BvsM/OYwqPanii20bmOQ3UCN61HnPay3rvhKsY2NzkGjF/xm\nrQAaPLGN8LSI2f1qCclpui4BCqcz8Td0mI5RRcGvXzk3riG0UZPy/qnls5Uy\n72DROBDNoE4U8FRLBdlmkRlBOesfhfuD0FTEAiy9fEukZvrQfK67DPlRkZMK\nw1K4pdXtsjM8rLK/HI8/fZ8oB38ccOM9GKBhDtKcU0+rfh2Fcil1cCE/oDUy\nw6j17DLw3oD0Q/nenATx4MWIF+3g5/ys8PJgxWARmUc0KeD3uRPezzmNw1l9\nOs1ljkWZnQA5c70keCzYzMg/Dxyiu5E+/NqaLE62hI/tzYPDvwS6NKIMFBC1\nNUpfDcNKqGOKYhSuzyv2M8nkvFp7jFx+77w+nhDy/Zh2ZBV0jNTWcnwOpRnn\nTG0uBEfnZAViG99e9CBVItG9HAt6/F4fTf5wAcBQFHT0aRiEkco3C2FP4bUJ\nr6yXFu6XJ52sY/NKy1hcfFpyQFjM0q9jiNxtXWEATU8Qab1ZwgEEPvG8tFeD\nVbeDDOiGDv8lKfe6MMOnmx1qmtvhDo7x7SH6VaZzJg3plBfBwoq2QQJ4tixm\nuHqD\r\n=48ZH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEM8anH0k9GbmUbCZ/Te0UZ5BhmOioRkXFOoNUObhfgDAiB6hvHyzPTWv3Cxfwnqc5Af3C3we6z2Jme2mqb8YgWWqw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.8e21c78b.0_1592822262237_0.4376575852221176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-button","version":"0.16.0-canary.6db76faf.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.6db76faf.0","@material/mwc-ripple":"0.16.0-canary.6db76faf.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.f2a488e95.0","@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-b1PkQiTmjNrN8P4WT6SrSUxeTjRNAq3MeqWZd70PGpnMXTDG2Z9stfu6nU4bD+zCN9TxTnnU3sBlIkdFLy71Hg==","shasum":"d56331bcac7db9cf980d5f5b5e9873b448c27810","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":78779,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7JCRA9TVsSAnZWagAAxyoP/2b4kzGGmEemwItLeax1\nSXjXknPTQeUv4FMjOhSxQ8qaOcMcTOdM+dawcHaz+6b3QHVtoVoqib/Lefbo\n8LUvznQ3PPeKky2t8u4ZF+DgHGhGn9yVSaIM0rq4ddyGl8Vj5NFX5jtXRQDI\nW6clpJojL/GASUlz9r9yvA5oiUd4ngFZjOHXhbKpV6nxQddqFhROTtzSoM6Q\nyMBXNXmnJH3ee4iS6oxT1KW81vq/QYRpJdZvmX/qmjyMSfnb08b+/tGrmgDo\nXdyFLsbB2swE3N7iLltHkS4ak3srHVOI90Njf/kk9m4Y9N+swKE9hoExxwDT\nMsyWiuDZH1xCrfpVyBDcdhqDy4Oy9clhrBCS3SkKY3m6HstGEWvoDoRwNHBA\nkMybvl1wwh8xr6pLmvx9YuDq9FUb8+FfAVwqvLlNt7R+0Vr/OxCKQ6xQKZxo\ndNqWWNqnDBT8uSUJLWtp1XOx73H4974or0blNgTlb5tRQh7kam/SuWW/nRlL\nHsOIYrN/91DaOzmg48cQ+sKZkc6PhXsvrRKRVklFwe070nAnhY6aGir3XB/i\n3NN8l9at0mfH6W9lzGJFqiRg+Y/c6Mt1WgTmHIbwJ0xI+kNAWo+yqnanetJp\nP+kU45GuNU5fhxoEvXftZjXlDK1sWlM8EbJZ/OYqj4aZQH3/4Zmi/BOXX5hT\nqcfw\r\n=7T4P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdooVa+cmZv6+5wc7Ig9BbfscxO9LpVf8Vs2XdMIRzaAIgD7EmCVUaGPBxvtTJNhnHDEp1jFkwT7acYO+tu/wqB0s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.6db76faf.0_1592860360647_0.54410076050399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-button","version":"0.16.0-canary.c4dd9684.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.c4dd9684.0","@material/mwc-ripple":"0.16.0-canary.c4dd9684.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=7.0.0-canary.f2a488e95.0","@material/feature-targeting":"=7.0.0-canary.f2a488e95.0","@material/theme":"=7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hQZ9x2F999vRvZIx6DJF3oP48ZnTcEsVxoAaNdrXmgBqxPRSc+DjneZs87dr9nhx4M2cUOPpbflg7pnBsqJHOQ==","shasum":"5007d2f08b169a960e438b0849eae78b5cbfb1de","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":78673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hxzCRA9TVsSAnZWagAA51gP/3okcs33xPD+RtlBVw06\nZ/7f2YuMLTiCRugCiRrmrhDBB6dvAUuWTlt3lpofyDKwTGPnHlvNlDGTEXTB\nrlJX8YM+k/DYev8YULUHOC4Wrqd715hextNeCPLQ2sJwMOd3iwsXCZ2e8qXE\nHf6N32hu+Eo+5kfhsKou/DzCNEFzYbcMHtZtmmUgtmK77I++0RBP42MxG1j1\nnbYW5wiIl7F7QFBRD4Tf6yT8BHxejs6U/bFhAT3pLCiUIO3fWfSWOvuTlMck\nKC6PIhY94nXjI6Z9o6N8FRajxKAV3WXh7//8i5nswVwIMXqK3rZ+SjYGbeFY\nJkPSNBRC1cc6mKvBYJxNHopc84OPWcs6GzqXqxBhEpPDxW5HdFk5WZ1hcpDP\nxk4486Iw0iFaMW+7BJgdI3p4aKA+P3aLZuJbM8UvsZJjfso9EKwX4EGi8XzO\nCMPVNpCTTbgh2cBCTjPC1ptu+Dfd+x+Ew/DAz8DxvUnlrlmG0RcmUhV646SC\nLaAh74xOu8W/5u8pOQzut+tuXDdTfKYlYya9wNoa2cAXa277pz444k8vkhiB\nfcrgRIP2ZvH7Hxk0deP+A5nkkXt3vKflGZ+xgU/WkFcnZucgcYGgS1NHg+OC\nMw3CR3LmC+OdL+Ozn3Gcu0QBfXrkWiAxsMlcavgkCXtGso3ZEkc0Sfq2Khqp\n5F0/\r\n=D4t7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX1s03xCTMCmWcA4iFvmaD6RKE0Q+kwUGutMQ4h8OLHgIhANv1FJQtpBGngfjk1Zl5IHTmbCMH0EsSGKQ8NgxhfZgP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.c4dd9684.0_1592925298717_0.5529439835419088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-button","version":"0.16.0-canary.b3e53981.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.b3e53981.0","@material/mwc-ripple":"0.16.0-canary.b3e53981.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.15e81fe98.0","@material/feature-targeting":"=8.0.0-canary.15e81fe98.0","@material/theme":"=8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6Ivzf6znRPpS1sK4C7UGG3xWDzE230qa9flLdWLpE/3h2MRGKHTcWWOf/K1tZYW6ZcQLNqN+7X7rJKLDdthqcw==","shasum":"9fd02deb3a3fb595ae3b125fc43bb1d50fab9bb3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qCtCRA9TVsSAnZWagAAhCwQAJtxP5ZInPF2Gnaa8yZb\n9GyH2auCd8W9Pz1U1sYzgQehx47KWuGSTAjBI3kGW6QmKGMyP9sYg73l+Kqp\nemYXWciH3eWbQdVEaMzeGGxUwAuVHoukUQgszaIFKwXrkhv0hldAa5CL6AUy\nW6+pA6vmRtE3zMzSd4z8/u6FZCkuGxh1RuWEgaDZatF0m4akOz5t0zULqHcR\noB03cNFZ4WTBinZ/ruClIP5dBKNPQsJkmUoCIlZcV/0+BUhrkM9aNjL044Xe\nhPchrtCqi1GCcQ0rbKsIYioz7I9PXQmwvURjUMgJaEw5OExK+LapArC+3Una\nE269xlWgISc9H1CgoF1D6c+rUHka/AUblbHlw/ZOBrefdPoe+NAsSlqSBql9\nZvif5q5KQl0P/dtS5iiCu2eRbbzZoo55K4UPQVn3lvhoNrz3TU0gep8scR0M\nuUo2CCgaElCM9t9WEXhErYBLzw5HsZhu2yfZljcnIlWXYxJhlkhJVFwoyW6f\nSL5EToxPPknvtIE2pooMEYc1cT2e95QGmiuXpdJ3068h4PVK0MT0repG/5W1\nN5G66szMxgwNfzbcTcVnhidYCvw6isHqGL3xEnYDFgRs6+BjesQrcXWAhXw0\nlLoQFAryuUT26JHD7c4WBhRw/tO7b9hArfpu7fCwOjfTgXtQIT0WZs/V7Jjh\nPOHj\r\n=r9gJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNaspZTxv5xa9e+TDZH4VNSaAIbs3BWB5rLbo9l29AagIhAJ9JoJ5B0siuuFOOwiHvDIghCfCUmumJEnrezkKYlf2C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.b3e53981.0_1592959148919_0.46856237197334893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-button","version":"0.16.0-canary.b9468f77.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.b9468f77.0","@material/mwc-ripple":"0.16.0-canary.b9468f77.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.599b8c319.0","@material/feature-targeting":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MOPQSksqRBPYPVL7OMqsAj9gLfg4RONL8yoNMXjKw75i4pjQiHdve0vrQP7kZWlPvHdGDT+4B8eAA18Wv+6CAw==","shasum":"e436d39ad950cce747eb9c4ae3fb3bfcdcd266e6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88uNCRA9TVsSAnZWagAA5a0P/0cjUeMut2nnCrZKoCkr\nE96jCx2mfJ1+wxERaMPSloeOIK+w8itIOo/dWIVpZReI6IaPjIY1Vf28XE9v\nwP3h40XVRok8OkX+7t6AqpmmTMY7eLB3KYJJ8dmh2a8c5o7y6iaq9Xzn7+Hx\n3048nK/vCQe6AIs88jusdacdFSAfXmWpmODbBzQBkwWHsRCFvI5c7mEdrIJA\nxWu6Lyf7xqQwhVkXmi3ZcvpVAsjLRUSGutQIV0+f7Df2CoYz34VeFM0j1i1c\nf12j0wvNIkY0WZ3ZAeahEqUR9LlEdMYmyXP0aJiaSAy2p3eOdVp82ssYT64f\nbPt2AsZbuYaNzMPSkQ974HIDmjeoukYL0+LK+TgOZ4zHAdfIhq2poSSM+X7r\nRf+gQFsKpC8RT/0C0trydJ5GtzwgpTPTLbXbgfNYHE/KnYiRKubPKcBRi/nP\nMIvCQzSf5q/R82aHzKr4XF79AGFBptkE9KlYUCgNIslhr49k2+FbTaFeM/NJ\ns13Zj141GC+fZKlTJETzvziQFNerwvSJF88m4Mve8agkTIA5xDXTRfe3FoAc\nv4n3XF0M7Vr2lrclG4E1EOE3OLkMC+eeregnoOxhIshdhS3wMR2YZ9GP0toA\nS/AAtV3S0Os34ulHJxOdOawwyIkJD0oRjM9ulE3aTjZL3x1PYfEhzzJbbdS9\nmPb4\r\n=OiMk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnKwQftMkKVT2LxL6rKsiGBwlsIoKXuAb+H5DivkkoZgIgVtXVW7q4RbSCejTm/dDjbUGwH7iWDdBGwJWdLGv2YO0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.b9468f77.0_1593035661562_0.89487833270667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-button","version":"0.16.0-canary.eb790e49.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.eb790e49.0","@material/mwc-ripple":"0.16.0-canary.eb790e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.599b8c319.0","@material/feature-targeting":"=8.0.0-canary.599b8c319.0","@material/theme":"=8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lTmwYba3ICZWoUo0K58p5yci6omraFr0oW6ZjdmgxEgjTp7Q5YIADwZDdEX8LjzPsRKC/wibelhVm78WpiV6yw==","shasum":"203cc5ac4119795e2fea58f098d2b6711bebf490","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RS9CRA9TVsSAnZWagAA5BgP/0sYzsmZy9cSTeWMLbEg\nReOAPKfH3Lw9HaOceOXosrltTaKo0guF2IBAAj2JddlgsFUjAgEqKeBQ6w0a\naxWp/tmBGv/gGQJY8+8M8voBrBe6f5NY11dF6RrDfbxZ3e+IVsoV3bCIyTVn\n/hVHRyt7dJEGIAvIMgITvqv9B617NonIKhhi3TGiUWWOkZzAxNJDxHmyzx6h\npctqnEywpWxa25wm+k7JChcaNL9qXknxFK9dcw5Fto3VTfHTavhyXiduDzwC\n3+SoQoqaThA11C+7oC72lHbVMYmEuy7xMoC3CeZXkzC88eYa80bkFoB+47p9\nOsod1zGnnkqAkZLWXVXHeCi/oQhaC45jgWapMWUfxB4GLMzAdhGHUhTrwQsx\niV9IOVwYrqXjf1LojgCGoxg8+QplwvulvIuPp37GDFVcdRiaTfZKJxoQ8lQj\nI0ATNltUeIrK+CT4FzLHOmfYC+lJS0knSH+jTxzmwmynMIKD1ajrUl4DK1wE\nIzwfnXOwfekc8lIaVnq+bVB3rePok8d4uutETmXBUEJlAFQrA9q+uoAkknXu\n8dgWzqCr+N5ERs4rLmILhnUJsHjxjAgQS4HpoH5q0QP+jc1XsUM+kb0O4cRj\ncNme32ALbcJZcmbKcc0yNl3GuDZCw6zIToU9c6/VxtZ/5smz+vLnuJ3+OjQu\nvwob\r\n=xxeG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAd3pla7BU6isFateA7n61HyWfrevZEFnxhUqd6lzfYAiEAxBp6WeYs0VHqEkFtOCxQrAhygrP+ko+D2v0uH7mmQHQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.eb790e49.0_1593119932988_0.8909994197097688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-button","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.9aa1a5c5.0","@material/mwc-ripple":"0.16.0-canary.9aa1a5c5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.38197b443.0","@material/feature-targeting":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zoJkqd05D/34zVkIEil6LkmTuBmJWI5CJxoahBf4Fla+917vehL3F6Ed5yIDwswj/dQilbnHxZoc1JLJbS4sRg==","shasum":"90eb671d11be91446074d7802e148dd58de9d69e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irKCRA9TVsSAnZWagAAj+kP/0IudgZayUQwRuZ8wxEE\nxI7ppL21WbR1BFQ7XAhXDuAHJaQsTxk/a0UBmnKh2e7Tbc1xQEj/E3QOurCa\nDsY0nJJiKDOK+1YlXCZC0E8h8SI4DWeWsxt0V5CfoaLZnaCYHrWwPXpKSSwk\ner085no35PZnVwfaMiuZGZBshxJ37F/95ZnGrF86vrQMCVWrD7U60DJQvPIy\n8vRtr9W5NAPRdZUHVIFm+0gnnZBMMvPWpBk3SCjQBdDLEdk6dH5OpB+p6K61\nGWTSZaP3pB9vrfrYo/E+8l5fLzuS7p6uHuU9KT7B23dLcldtxZhqHfmfDyae\nsLfTV7g+HR8T4NNmH87r0OA+UEVxUwfVjQJa+8i+1PGMtJAo97OPgzkCRaJu\nYNCSsqa31LPtgbjv9d1nnXVIII5XP22jQ7vL5khHqdB64IDS7XylwpVLR20U\nyBZRCnBW7tsChwU+SKE+kodk1Q0gxacIF1OwJScSbV7ZCbiwngi4eVPkCOSS\nVuhSICXJ1GsBrYNYCfwZ1OyLBQAubj4VcbodUbwfcpnEEhBabisQj4LrDAdH\nwShkhjaThjquK/iKbFogCNVEDAoU8VX4O8DKrWpZJxjdlK5ifQiguULoI+PJ\nqAGMMtrkePu5ZSlYAFzwq1Rqn5b6u5mCiadnl0Rm9O/PoxBC5oKyFC9d7VgU\nt8Vd\r\n=pAFe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRyLNO/0he8REIacWOCScF19Imp7JsZbS4n/mZR+X65gIgMpH3KI/nDQspde4wJ1eV8guA3K3rujgjYP6/dAcSiiM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.9aa1a5c5.0_1593191113508_0.49884884337434143"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-button","version":"0.16.0-canary.d36e9861.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.d36e9861.0","@material/mwc-ripple":"0.16.0-canary.d36e9861.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.38197b443.0","@material/feature-targeting":"=8.0.0-canary.38197b443.0","@material/theme":"=8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-db4FW50iZ8hs9kEBJigOAZUjqp/M7/ug0708/oCA33swrRmjyY8z3p5A/g/0h+87ZA4MZhEhYVozkcAtE4kMBw==","shasum":"4a31fe4f7b45be322e2ae7eed5e9cbced9265471","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jISCRA9TVsSAnZWagAA8xUP/iO1LNVtssw+712TR2vu\n0dYHbr/PZ4QTTKX7J++P4qjyZ4g7kqkBEFpo29ggDOzSEY9xM3S2a8hbX/jf\nAZ/bEKRj99kZ3GnrkSXvwiNVcdHmtB1Cx1FBXSq52raVz/Ebg/SiYr1I+LvF\nPzKlGOQnktb7GkiGj+NwJRn1vLRIDBp80MB9L1iZxPNhzZALETs3NYPc29X3\nOyl9AdhxV+EYr8PGHiRwwZURTIL8v0XfHjKAj0ySYTw8EhXTj76gMp06Jvp+\n6f+u3Wcmz28Iv2NgLomS2wH4q9iYXu7GDY1Ig+epWcV4fROWUQspnzu9m2uF\nj8PZFA3OIXigbuic3Us/tXPupcOUf9RKKEqn5qHDFFSyr6M8l+A6FKYpFK7Z\na6gOo0j8q1OEV4hoNU+ph3qsNYq0jCQDg4uAyPQHPI1csgi5cBIjaMPCLazy\nZTFxdWttqGk1vYJodtDqvSYWzXCh/TqFMuuMMjzr7Jjv8ZYLpHQ2O4bTjwhI\n0G28I6RwfGaybth01nik+hzNFzCH0lVCVWx0Px13Xk7yY1iwk4QTcyZ2CvPT\nW3Ox8kVVlVgFM57vPUAHsfiDjxv6nWxkOjXt+1DCMKlzRCSg/GgTBBYQPeA5\nMz1A3gICDgPQI0NwytzPo+MNhzzno5K2p6BDmNVeCIMyBrMTuJ6F41GnMSzk\nCjU9\r\n=2/6y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvbkhT30Xa+YZXYcYemhrbEoqWoho7rahjbcy+j5tZcAiEA88yzXZ07DwHwXGw1X59pr8isiUSph6ri3XMtfjiHwwQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.d36e9861.0_1593192977731_0.9248348110962634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-button","version":"0.16.0-canary.155c2f85.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.155c2f85.0","@material/mwc-ripple":"0.16.0-canary.155c2f85.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.df7154fb3.0","@material/feature-targeting":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TYQIBxT5b3jKQcyo6pvC+NxhW17ND62Xt2ev/T5GLJOBAqMDs6rznC+Adb/kZJTj9SjkRklnnPXWho/6l8eQ4A==","shasum":"c46de99a85bae725bdc96718578d9ea62eddec15","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oTiCRA9TVsSAnZWagAArx8QAJ9alsdnuE3ME12hTu0o\nKr9bL1FG3sAcJWnAMukcL9WDzc55LlIwJLpbHb9gL2zetz2Z1HnGiMLJ/oGE\nUQYexgx9hLHBUT20Y2c99XflC2LklPie77RXyZacQUKSEmrNZ0Ri/uG2Ma4K\n/xGX4V2cyWkznKp64iBxjIUntJzWqkK6MIt1CxutVws8XyamV9jkZj+7xyET\nmQ7zjbiCG5QXELNnES2NEiANx31AdXDB0+ahadUej96hXilsBja5g43XKHhk\nhXachePBZH1xAFq9a7oM0PgCMtt7dnv6KXlqPLoHKhFszq5WXDlLnZfzLuNQ\nTJsul3GyGPlNPTowJ6ShKSoFp41+LRhw+XEWiKcjAzqe92UH6BBDJ+vrzCFK\nh+iQzvow9oeKl39AfejJKoqfXi/WHgu3JvWLmKCUM/+nHE4eU0dnrH77Bjm2\nuCVkAJNiZD/xXl0eJC7M7Xk9aWvUX9Y6DK7B6VlF6Q1ORheKlOEcP1pIio5C\nLduRMTrjONzNzOjqkM3ukz3ii3g58XL7FQhCidgZzNWp9is6g3dKGWdBNOUq\n3rb7xPwnfOPP2ycTSQswb4+uy53K8+0FkXKHrH0m65BI3soX8/SvaxpkST1R\nvaqIWGT+qK4gsVkh5TY6w9H/qu+qfhfcRgM04QKVoqXPZ+AplYKpxi7fqTBl\n8r4g\r\n=zSxe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD8TEtaPh58prTHu0GVjgEwCromC6E/6P6YoIeU5r2SwIgPwCP2obsMR2d0wNybxtoT9LwXxtlVXMo8oVMdeblgfg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.155c2f85.0_1593214177837_0.09211392931340256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-button","version":"0.16.0-canary.340c9c40.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.340c9c40.0","@material/mwc-ripple":"0.16.0-canary.340c9c40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.df7154fb3.0","@material/feature-targeting":"=8.0.0-canary.df7154fb3.0","@material/theme":"=8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rD6NlJZlGSW0bxZlx/7LgQCdACHf0kUAoWWJMtchU1Cc+9smn8XcGkcnlQBk64GBYBQM6J9wv+A0J5pmPnC/OA==","shasum":"f9ffa1f09f7dd3ee1403c3a2c3cb1c008719b1a8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9obnCRA9TVsSAnZWagAAZLQQAJBvGvMqJNm9zH2VqTGg\n4hqYe9oXh0ugRUkjP2kbsdKHFEp1QqlA8kQFxhC5VHGyvSJ87XZ2KVtxyXd4\n2FKmJ7IEVMa+mGcIsiKFKirvRD5A+nxLr+wxO4sdwaDnRW0ZYSrTK4vIqhjA\n897+J6vtL8/GRzKFQn3XgZeNBeY1IYwyA8dlEpcEdEvdNDIrW/IVj8o5jaeU\n+Xif/3Ccj4ez6+PDIYYnTLbqCTHIwpxIK/LXcVmpJlGhg8pK6QLfDLJRBYmf\nqrHhdElbvn78/pt7wY1T944eHXfqPLEGwG5yP2AbfO/Y+pMvue5mw/fJromu\nISt+yrSuzAMrk5GV2nA1UORwrNcIO4wNKsnMCH+Nr/5KFwbNc3SFSIdmwfcC\nXz/GVbKhUIiAh0FACPnPjFPcVL7gv6AaQPJk4WTz73P6RBx98FlsPhAi4Awp\nTFPdMUGRQanFgx1uHrkxIC1fcNWUbaPJr8eP6bdWAUvAfjUZKH0/L6CtPHu8\nbmbFVuJEbxe45GMStD8mVKMSNNdRj9K9CUFr72EEMo4m5617eMsQqpPRqU8w\nrXPFfS7VlAHl6NFuW3dziJytp/mFGs2RsTDry8WBWezR5dnA7bC+6cz7wIOY\nDZqHyARldlpG/PIx0o4Pc32fvH9E/aA7rPnqVDg0WJucQYTzGc0Z+P7IGcHW\nOPUR\r\n=KW0J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNuyuMvBeSOG6bq4RvH5vt/dXcm5YXw+I94qQuCI8VQwIgCnoS22BNxvGd3Q6VFyLG5uwbR/X0C95kFxDfif+n0wo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.340c9c40.0_1593214695107_0.09223734659360527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-button","version":"0.16.0-canary.a3384d2d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.16.0-canary.a3384d2d.0","@material/mwc-ripple":"0.16.0-canary.a3384d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c678a9d34.0","@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7waqgp+c4jt4jYluriB+H5xvPNj4Npprn5BIIrybnJ00JC5nPWgrB7flewn15jrqVx7VUlqLHajcFjlSbUjUsw==","shasum":"d9828114403134f7446447e1e3ce218b1fca6b56","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6foCRA9TVsSAnZWagAAT4UP/1rFDjWllNrDFZywU0v/\nMk058M2vuz2t6pc+pzraU5uGLvwFJ5l7uILYAyx35+U58EH8FGGw0nHbuyTK\nCVqm4n9okt25k92QPlE4JGlLuykyqupXCQ62DdSgJD7W3p1dx13QFxBAmOC1\nTn+YzXi6OWka524KqHWPJnYqxR6R574yS8IiNRp9Nj8TNVmWLeoPOgBH8YgR\noS8zO28c19omJ7F3VdWpHJ+wc4PyG8OIB2HAaa83lbsuc6bmzXXDFEv0jYmZ\n+FAXUA7MiGNmToMSmxJuESfn+pr5AqxgQu9x9RNSyN4XWcGDxzkx9fRihfIY\nVJDgSHVMAjEgz0WJuN9FNRXpHcKdOGpRlpko5LC6bZ7EuT5SFVM8nex4vSr9\nTSn+6lX5uq3BxThOBKmnYlfNV44TDZz4whn+m/dZuMUzm8WTP2k96pibH3pz\nFwlwQWIrjPdT2WMIT4QBUSzqWfjj7tyi2GuaVV9L83ZG5Yy0w9LHsOIr7FGE\nyGzA1/K4Kx6DE01rpAWGKQcwkr0CEOFI+FcCXtsXgs1EY4Kuw6eVJ1sgqUcu\ntRs9nWVmyxY1lEt6kfVdgWqQd7/RJLgZlnCvz0/oBH9A3R5mLnSVVjqm1w4P\nY6+0F0iiTix3AZ8rSDtOL4E7sEpNmaLb/KcbNjuoUb3COSU7JvSHuiKOhG9Y\nUX8W\r\n=z2GF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGlXDkZ/g1B5/kNzKTP+ujs22iPqVlrviQByICzf3RSAiB+NfpfEq0NnuoASSHeZgwWk0+qVP6kSzPEuQYeQzs6sQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.0-canary.a3384d2d.0_1593550823993_0.18551560376362697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-button","version":"0.17.0-canary.6d056c96.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.17.0-canary.6d056c96.0","@material/mwc-ripple":"0.17.0-canary.6d056c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c678a9d34.0","@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WdiTDHtv8NFptNHxeyOUBdj4OKNhTEH6vm28LTRP/F727cUED6XhrAu9Cdf5OwZ0YQiHLqn7/w5oNbIKeRCsSg==","shasum":"2fca086e3ae18f8a7dc8ba6ecdf8e8854190d945","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oaCRA9TVsSAnZWagAAJMsP/i+D6Ad3eZ7xoaKKWk5t\nzUaOLPnLjQRr7MjsptPDwK3GC+x8LHY5blF3qQY4PXitvIuJbgsfZJOJmz1c\nuiXxKgZ8y5qV0nSxLbOdPN6AtA98CazaI+iBUqcgm/H0tojUotp2DG0XA7dS\noX3dZ6Cmi9yTWnZA80RtiYBmNGha/fCUXf8nOBN9fDh6tNcnKl+PjDMBwJHc\nF37vZKwHPr5oJyQZXqYL3qiD+qUvjMH0/sxeQBqcT/UsrY8/wqgz16a/aR3w\notGwut7TChapsvXTjJJnCZDnm/pwlgtZwgCq/cYu7O5sqZTwP3hA7juh1uE0\npdgk15ej8qbJmdoV9ZPerJEOyQD0+wC3H1GHcKi80ZqzOSAM+C2V4hCept8e\nPWWyNxNldfBSeu7AvH3iVJXHi7b/t0dYQy79mefuYtLPidIJ1/+qve61yUai\nm4A7VfgI5RiAVIyf9Xbl0tNyLRSxRuRx36osdB8mHuevzFSvpUm7oHtakhOn\nDaTh2u3VGYSkdx+GYEvSjm3pBitAFbEdpgdtIu4zXxxDZKqULEBl3RoGk+hA\nKZOJTfouueb6PD/R9rr4FuXRJOnmdABO0CMtPUIvpxtiSF8Vh0GSC46gsvPT\nG210+vDww0v10pfNKQnCIrHmV66Hs8X31bLX8frSGCXXGB+fuzOP3PRVLLq5\nI+H8\r\n=YBGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo5d11mHlw6gTeHKJnlPVtDUMCXau/utpfyqasp0YgogIgLE2fPfb+E8UVZBQI0ig+zIQcL2Gj+PypdWmxkiDvREs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.17.0-canary.6d056c96.0_1593551386031_0.1032913771006736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-button","version":"0.16.1","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.16.1","@material/mwc-ripple":"^0.16.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c678a9d34.0","@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-6R2rlkUTW/q+J9SoOjX0MN/Hq5FDWKzoI1iJmAYvvAfUeaHHrT/HR4YbrS3Pyq1cQPX9xg6YI4eiNW81rMeRxQ==","shasum":"1a83316316f60385d1027787c99287f71680a31d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.16.1.tgz","fileCount":16,"unpackedSize":78657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tHCRA9TVsSAnZWagAAYLgP/02ThlExV6dW6q0iK2/w\nyYpn34L2WpLfbKPezVnoZYd4LA/LWWBkhWyarmqBKzD907h55S2pRa/9OVSD\nITaUZo7ZLqje5ERkrUbZkCFj6dq+1HhSvL9eY9Ypa6KjZZywYchY88Mx9/5a\nqDDakxEotzuqQRwsiP4k03iIPTAXqWWl/dIah4U9+oirOh/ODD82jLqYV0eA\n8nkPye3BnORs3jzN/h4khSB810yS2p9gL2w5/NNZD+yvZQftWiHgc2FZNMVh\nS1T9gI+kg1u+hmtkFlwd4AMR9XBmlSMkfWchJyxzHSOlv6PkiHbg8+s2IrLd\nkAR/aE+fgHr0RaHWA3bNRzUlhrZAGKkQI3QHdZ43PmNQofsGDdLNl/GC2dgZ\nWcsKRxmrpx8RtmwOzSmz+4H25yWF8tNA3XfuPT5wEHdV03Ka2qvzX/cv+MrM\neNPfDR6pXHTvj72rJdQ/adLU2PDbTfofHUlnLEMmFMdCBBvM/oQhayEHosJY\nWL089QKPp4OTLf5P5Y5VdEGLO+PNq6bzt8YOlBBu40jl6MNGP+CkXHU1clYe\n3SWAZsOKL1ZU5NFOI2tRPFrCtkikkIaFmlonMkNjSmDnMu3SRt/qYNXy64ff\n1GFfz15LUj0RgOCnatb7bissWYMm6/OYGN//suqHJh3xrzaLjpZArfbQEbxc\n+KD6\r\n=jgkC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxCI9NgqMMT73R3mZyDk8INEjt9s8GiUE4q3jbjssiWAiEA0eGrorauwT4RO7+q2GmsUASyFHw6468JXT+/Z4j6M+0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.16.1_1593551687132_0.804983115741374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-button","version":"0.17.0-canary.f7e37607.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.17.0-canary.f7e37607.0","@material/mwc-ripple":"0.17.0-canary.f7e37607.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c678a9d34.0","@material/feature-targeting":"=8.0.0-canary.c678a9d34.0","@material/theme":"=8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UrnfcXbA0d24osPHubxPptb+1B8QOMKRJ1pOzpp4M/vqag/Ap0yLVWlFCFKz4mRxwu1QZuQHmsFP3kRe3pXwgg==","shasum":"556f3a63321a69615bbd0bece0931b268c1b31db","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7ImCRA9TVsSAnZWagAAhxYP/Ak9BT4SGgqIYOpkT59X\nLNRd02egCRqQA4PJQVT0rwmhrec/A/fbusQ3hekU45589rgl/XIKhGet9kZ9\nX4OiZ7ljGK3qVIeGVsUpiG8HeajP2uEPu8NF2chDDljMwiGaKNJlzCO+Z53D\ngaruv1iZN9dfzs6f+pHWSy0HEZt+eQzxZXQvUHTpxWAox99esfevCGhxTVEL\n/krWSKzTXajAIvkvc5RHEtD54XPOtQIdHTGVhNzTL1rw5zOxKN80vdi1bnDe\n7i7IoXrInzJ+u9WZslnTxcrz1Tr8CiSnsZVyQNl0RX0ibV3W8vBB0+cOzbMS\nZ79E8KEqrBfqW1AIRiP4XsETE/edsZM6C5HnHXoD3lfPJMQJnHy/oDINP1wh\nVsk7+f3/2NlNRep/bmQw+BY0sI9S8GoXKXT+7h6r5O7YOv+MbqUbuPhqQrdj\n7H9B9XQNikarOlkN5gtLWGVcHRMNYAYTXzNzCufVl0X78rU3LcCWE8lbelZJ\nT4rqemfu4IPcDIGkWydLIsm38E/BQANsnyJSefKcJZ2tqt2PUmgchHvREdvE\nx87Afhq+93oLbhTxw6AgYfPcqdLF8BRD+mzeEIlpzC8J/JD/6/f6/rstxyJs\nBeTMvSLh+7Q58yOc50ZU3Ldxg9mxA4JWpHrWDTRDXyKv+DB/kqVMHdg8MvJw\nqfzT\r\n=S09S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0OPOLAG90yGBnjAwg8RbnfYdwdKJJb5NWo7PHofgFpQIhAMCJzo4OFoZ7XoBYVNUWIDQmzRyJXMMgN1QQd5Dc5KxB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.17.0-canary.f7e37607.0_1593553446486_0.275161837617387"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-button","version":"0.17.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.17.0","@material/mwc-ripple":"^0.17.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.610c26c4a.0","@material/feature-targeting":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-pEcnCglObnVe8b7IqrvskNfo7EFtys8NuwNgA9lJgWsyeXVigzbLw0yWflSwpTkc04nBhbZyU367defWGx/bJw==","shasum":"82745959801b5532b25f253b757b55be103eae68","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.17.0.tgz","fileCount":16,"unpackedSize":78657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeQCRA9TVsSAnZWagAAApEP/ic7YxoSOh/wBgO2KaZb\n/xqru830dx1TKBUEViJ/mSP6O6nByqf7jB+4PtFP2wN3vrjRteEyahi551R6\ni4nsVLRysW0ofrzNgdGFzXS2UBU7m2/H4BVpxpLutjQ7qjUpOUxPJDnqF+vW\no1zK7yjBZ3EL+9EWhBeBInEVlGowRhZVhSacG7R+6S/ccGu+fZeVC5bgk4X+\nhOMc0+Bl4eJytaZ6CP/cHQ/djiIIYsekVSOHmY1pJFLLKTAQ6ypBB0mZQn5Y\nyc+dsU9ojjY50m24ROx+3ND27DK5RE8wyZGpRYmUS8oNvPuF5qe8d/bz/P6V\n6+tvjdPn1gh1kY/bEFeTbfKA8g4QsYEhk68hWmU2QLvBx6W4Nw+TbaezHLjy\nrl2fbpRy+CuiV3ecp4If+qgf/R4AgddnW4lTGDm9Ywu0e4Vm1NzsqtLtdtpa\n2mBTAoTCsmLNbBkT4NGxSueAoMQN3tliFtnx6+S6HfhorGWvPyByOQdktMSM\nP/8jNDJfyY+NNczPkigcTuArEHnDArhi/uCvNqaXxU8KXpTAl2vgyHP05u1E\nb17uL0GmQdflz8MSjKkparjZUb1SjD8pA+L1Ewm7zwSvTzl7htLG5+/UE+oS\nw41T1QcyQVAzziq+872lM+i9qt7UfiDBjEDv3I4uJEV6hv9g0ISxaj6y9fFm\nIo2w\r\n=N9lq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKDk7A4pgx1KvOST0xuSvA33Qtiq/iFhSr+YurVJm2ZAiEA+HvUNfkeZWV9U0WSKj4K2cdQ4nKAnlR0O5LRpBFnWcA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.17.0_1593632656542_0.18948029058357485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-button","version":"0.18.0-canary.0afbfef2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.0afbfef2.0","@material/mwc-ripple":"0.18.0-canary.0afbfef2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.610c26c4a.0","@material/feature-targeting":"=8.0.0-canary.610c26c4a.0","@material/theme":"=8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-AoN9iH9ggXppHnspxRpBsd8mK3mI8Rv8+j6AuChiDsSDeF1/+IFfibZ47YWvbONAM0GrGJsZeCTtTa/Zp7Chsw==","shasum":"c83280195b9f6dec1391f6d9db83602dfec3c397","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeXCRA9TVsSAnZWagAA9eMP/1tyHovOUaXUMQfTHLYL\n8jqDKc9F/FaR20V9e8+/tY/WopG//23/8bHBNr+VFPAk4oRAFzIkp0rIr4fE\nDv6izYaN/cUnReGKoP+Guryn64qqGGa8dari+qFrAhL4SIb9gFJV8QmnkFNU\napOtKgE35+/IZUExeKNT6dZLhUDdS9spk+f69GDqLm+gzv4FAO74UqyZz3MT\n3ouCLcqGlaz4WG8mNcJsV6x4OlcSQLoZ44DqKUMHnzgsi5dLIKkTL24u1XTa\nK3OKbW3iKdMVM2tbP08R9gr4bba7HaaqjDi3Er+0wdq+wiRrsjB34ZPbslZL\n8KrML9EHhlzDm55LHjhpbijjPLcEmksha5a4+YpkrhXyUteiyQeU/L3MM3ow\nzHgtN6t98f/WpJPiCasVSOEauH9hqGzfkorsZyoNtcN3x6bipaPaV3VKhiJg\npca9FzKnKd8nZfeVeh1ZAcfzFLroYb2Vj5bEWCU9TQwI3pDZTNYmLmjlFJM8\nxFIbHiwVPHR4RdkuTyHBcfOG2j421wF9ysRRDBRlMh2oWME4fZXqOawcpPkb\n0GhRuVXItX9f0BldiVvhfmshh9z4TTg8XcDBgZ2kDeXMpVJXXGu6z6T3Pg1i\nCrXC8aJb0fniY83s+ckwyLKVDEnlpmesKWVBQ0hH86AUAz57JX21x65xeAk7\navoW\r\n=ebH2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbWlHWVH+pLYZYXfJdFnHiRRLyPe6mFltD1CF5Kh0aTAiB/KJFwc2001F4R/V0Hi7v+aE8BwVS3QoMFzJK0a8Ozhw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.0afbfef2.0_1593632663292_0.04228157673065547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-button","version":"0.18.0-canary.fd970958.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.fd970958.0","@material/mwc-ripple":"0.18.0-canary.fd970958.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a78ceb112.0","@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WVgMQIp1PPeKB4Cnm50Yp/ihIhcZRuGHWlXi8N+FBuAVC5kmPp54lBG1ao5qv9Mh3QTK5JzHFjnrLDhUdJy/ZQ==","shasum":"6423182f08d97d99562a156a5582a0f1fdf5f6ac","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1FCRA9TVsSAnZWagAAhVcP/RphjaXO4l9y+UkZKz8M\nB+qk5/iBkzOQ+LV+Bxtx/iJNUORdr0ODFSM0FDOMwQYDmlskUSeMnZ13O2fI\n/zleQhhq8GmuEs7BOK8TBltQ4X7SH2ZogO+Rr0N4zgH9cfniyzTZCyAEwXk9\nrBQFGYy1HXGr0MYfcYzvv6x5QLToX5TXvjQpw0wbrEK68kfKIOxbCErZi67g\nY98eXz8KVI3BYYmclLo0SyfWeSBPJUs47iIzEmRL3xyfxDjNmTT340TXV4om\n/y29Feta7Xbwzj4UMBOwa6G6lbUNchmm9ZpUtcSOMl+NBzNl5xGbVdRuZ6Vu\nFTTiV1FRSzKpVMKi4tQILYS8HVAdyNy4FmfPZejoA8lHt1yHbJl4nAqrsE9+\nVQQ24+FwqNb96u84VVGhMNeWy+n6mLB3PZ0RfvBme9FdJR2AR9AniE06yfrn\n/kqIy+ND6q2SFeWN/vn+eO5EU6GeAdOoQaL+NBOLzRRR9pJeJdXInfnSfWdw\nbkqa0svwlSyWefBX6yAmhEa6eXfim2z8r76b2VJDffS7Uh088N6+WS7EatVv\n+C+FCOOZ8FGXWA3FeoOdjbBFJrZU9H4iYff6CHrx+oUr0VeYC0n65hIf0zCa\nTqU6/WGj/ccgHi+jEJTH7c6rq1/SVGT5gf420Lc+OeXub7wtQTRxGQqSibBz\n4ANk\r\n=AVRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0KgGhL3mCBlyw0A4FP64GCSta+8jzj8rL0OLg/Nv1dAIgD6tOiTlPceYp+7ClyOLrCe+RgTSuvExN6Ri4f2WBLc8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.fd970958.0_1593646405372_0.8500713565151266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-button","version":"0.18.0-canary.fd44be19.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.fd44be19.0","@material/mwc-ripple":"0.18.0-canary.fd44be19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a78ceb112.0","@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+SbtuwZ5CAxBnN9z6HHehFqeI0zeO80CkfJBCdff8k3QyP+14lOwKDpzDLWM7TxEYO0eekCIPllVCezFLcgg/w==","shasum":"edfd6577db0916b88234c9c61de94c7bf1e3296c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XUvCRA9TVsSAnZWagAAtCcP/i6xeu4aaz6cl47c87iK\nyLHuj2wWP6HPBPwaXl+vssv/toNo3xRKYPZCDIezY249mJ6fs0oKvDGwHjjp\nxVExDeVGNAtT+myjtiL3I9Hz1G8C5wirWZPpOTaxEhgukvTm8wZBtPeT8t2w\noWNfkmZL5IIquszhz+FzWZJ1uWk6n1auUb651QsRShnE7J9X6BfIPwkA2X30\nG3YsaeeB7ZpjUvDPqNQwiJcmDh+BsyGcoaebszoAxz6LA4BAncYG/jaaWBZG\nPruSBX0YDf6VCwU3D6zpZI+KTJ6c77UPaFf4qZmpbUFpozPr6YBbXQ4yKBH/\nCYDzJF2x1VaN5g2nEEN8omD60uLgjSMqZ4sDspl/dzz9CQ2Sgw4aI9nFCk8p\nq2wDQopqee5JyPP4Z/s2bhZwjH3vDT0FLeONt9RurGXnuPtvfhVfW+bcjKBJ\nTxAfuH4OJZPIQZfLBvbP0jOTIYEzfRxk+4VC0z5I2LPnQoZsUnY/LDYP7y/a\nRurgOCMCMNZukdZ2QFxHErx6/9Tn+NOdWanwHYc1fs6fv3hCVx72A2ay4kcm\n+Vb8cuxHpMrTCLgJC5nb+mj4bxY7+0j3Ae305tJz2yUcuYK8R/pxYq6RXCku\ncKzUkoLmJZlCp1L0WiyA/syX8J5lCOV4jADVFgGrvMD75BdqzawLnUX93A01\nZOED\r\n=7mOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFPvMyskL7P3s1tNA3D31h9tWvHTDLBt9mFzyksgEywEAiB4JzxTftU8HbRcOeoPbYq5rqoMQiAMvqrLsTEI5moF3A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.fd44be19.0_1593668911338_0.6763413135058567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-button","version":"0.17.2","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.17.2","@material/mwc-ripple":"^0.17.2","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a78ceb112.0","@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-2fNVfF2tL1yywufCY4qLgqBR5lS2QFUIu9AqOmImN0MNmFk3jhXAiVSdWbuMKruiGI0HW4DAzM/w+uiAVu83KA==","shasum":"90924f028ac52fd462d127a8b5587be8eca6877c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.17.2.tgz","fileCount":16,"unpackedSize":78657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xd6CRA9TVsSAnZWagAA9K4P/RQNriRA8wvuYXy58OsM\nEjzDFyI6nHL/EIkiN8VoPvXk2jz63RegTpACsll/itPxZmidxm3CYdafqfhU\nX4slZUSAuFz3/kJAEaNRJKjSRtNEcC8LZLQFnHa6fYSyupcmTpJMqu5E0XSS\nSthfWlte+l4N2sHjcRt06sLl2pnMB2XuXhUB/Gqmaz+FMWrohl9gjI9c/vjq\nPmHYY4Kilm4wp2WpAw3ri6NIBcYXjhlWQTCeQdQTbKD73J3H+2VZY4NkqBF9\n2I6vIioVOchBxatdPYfoDVTcBHCVwbShMYiqGJ/sMzt2MN83sV7NB2zUc+zI\nhNxOT23L4GZ5ZNZdrK7IFZ6r9SHjdYMHYkzri0IS4saKpBZrxCIeTUaU5wo5\nYq7YcR7Benetx5TeM9SS5zNHRHeaHD6bxVAOxMRqTZwnd8lzKxW0KZzxYUZe\nZ8bhyuVqH0Ax4V8OANIF6M8jpvJzysagbdbB5z0XBb6kZr2rx9U1fk+I5eb4\nNgPngjuhsU66ARYzBaW2hUu8P8yso1UWG3fdQFGw4iXXv8OHtu+NCOt0sPwt\nJLEd07AJJ81q257r43tnpxuQzGf+R9PNyIZpkrYPQliEDAoeFaFSNifgRFmt\nufyvrZFo0AeFB2Wcz7Z0AFjGuf6Tfq1NskO1jsklFODQtHNO1qOLeFatpqXA\nMoFg\r\n=DI2h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvmliiqWo3wW7p2B6TF/tF9g8PbmBaNjATquMmwgi6lAiEAltwcWTfoz9V6wR7ayieUUOx4CoSEpZ9o9Qhp3E1hqWo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.17.2_1593669498408_0.9578636504206133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-button","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.ca6fc6de.0","@material/mwc-ripple":"0.18.0-canary.ca6fc6de.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a78ceb112.0","@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SwMY/2NW4/1zN4/wdLVgWWepP8DvHBrjY0oqv9eTigfpRGgeLrv5naRxER6JT/sf6+dQ5l4EL9BmPoortwvovg==","shasum":"e40b269037cf7b6dd7bf269464fcc0775c188067","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Xe4CRA9TVsSAnZWagAANyIQAIGkqR462Z/hkcDD/k0C\nVaPRWKeHW2Mak+mgnbVSTFZh340KoF7DvroEH55ryvzZnAXlLn/wNNE5EXyt\nLtJR83imha3SwHbdiM9SnRze54iqjwYUsRurOs/30r6Tk5ut3VWowSbNIR1l\nxaSeUXCqKC8wkIFD1vZh2pQBxmJC+Ng2YsUfXc1T8IWyJ5lTfp3UONhCdvAx\nUGMZ0NPUFW2oHeMjKTUbHIxUz5Ds7wvPmk94JkuD4oHS7qRni1emCzgLFf84\nMgaV5bueLAlMm7FTadJ+sp9VMtM+3mwGfl3dtV7KDoh6a7eQZdXBKM9UX3Zj\nYhgP8/cSGuOnpzD0BeiCx1W3kAe6x0xpI/cslB8fW6Ae1MsYeEzOZ60sUVjF\nxRLwYxqB8FxdP0tWUluxpFQtPUpaujaHQPgWNPakFKlv9hA5JH5RCzPC+/3q\nH4dRX/zJtANp3TOuUCybuoEeIqOzSelEFwZg/VrV5+VVKn0pesMLc7engT10\nSmKsSqU3/FUEwG26RZNPWRYpl3USrSvmdwQBNBUT0P1rksiIYT5/301RMMnU\nfShgq8iwFks/xNhs4ZHV4nX6Z4EDve8mSwPdeUfH4DIu7WLJf9n3qh+z26ZY\nKV/8rh3Hxr4F3aEia3fUwy5k0dbV3aYF6ctRRgfgkueLl1IT874yGAnwljt7\nOZr3\r\n=24/T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtNhnQzwtUC/pnruJaDOF79mkNjzVVhvsWyj5S7C5RnwIhAIYEtDDESU237PimX46+nMrWQy9LP5RoU6TF0pVWWhaY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.ca6fc6de.0_1593669560076_0.9352124771492938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-button","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.79f1ec2a.0","@material/mwc-ripple":"0.18.0-canary.79f1ec2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a78ceb112.0","@material/feature-targeting":"=8.0.0-canary.a78ceb112.0","@material/theme":"=8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-uqUNb0rwayPVGH9B5g5JzlOueCDZ/FF1IWXk4XrSyTKH4mnuy1srQ1Lk/R+LOC+FLVU7ulogzC5Abm+K0eq11A==","shasum":"d470df69c55cc213cb84cbddeef96e61b29e0b50","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLGvCRA9TVsSAnZWagAAvhMP/2cbDW/pnk5Bqd6CTX1h\nLrzr89DMjKZERlmqr0PzKnmxdxo9e6VGBTUszvPzYJJy0nOCPn/o3gBbitGV\n0RJAI2vhk+fm0FIhSB0l/lKoHkegyMqt2eGgpUcZuJsUhabjO/dUNGWpJgnB\ngYBR9ep6UoE1+4mIxwsdpKdU/vaoj1+JxqG/5Lthgio+JgYdHvZ/nwmvfHO2\nFRj2CL7IETmaPXrm8ybd1XYDzuarhM5mA8KBvpcr7FugCI+qRtt1v81uH+iM\nUZ4xyx9fCmG+R0EaA6NDI+DckIAN/ZibixTXJe5GNQmAJLkgKn9lW7D/wLZX\n02+K1gKbCrBNP10NR5se9MMvxq8LfD5wCq6TV6Ta+seENvcgzMuVpZlbon21\n0QeFqQ2sNAiUOpbxvghYe5CtXul6jfduHzcXjSd6crnjBe7QYQsJFBUHBMV3\nrXZYDryDD0J5wKlZf5Z0/ZaWvB5MSbDc+DaZsLVHPgYuxylDd7+Zuz0+lt0I\n9t7Q7V7/rAQkO6+sijB5GqXsk1NEVWsUNPe1tAuLBCK+dYtoUOCiZabPv6hY\ny6GzxcFFZ5dr83Mc+pVvgdnedVyvbxZwU34dyCx7ZmrRmakE7oQzcZe0kbci\naeaOUIwiTP+IxGzc78Em8j0zFTC30oQ7+d5e2/Q6f/HQYCiwk4wgxeBbKc41\nPcB/\r\n=psEP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb41ajB1q+PDLjAKkWcy2ytzHmAntH9TaG7RE+C8obLQIhAOVJKBOkld6JILzlyXX5QvMKv8dQMdlHIpo+2nsp69lr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.79f1ec2a.0_1594143151522_0.5641950446699104"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-button","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.a7bc45ae.0","@material/mwc-ripple":"0.18.0-canary.a7bc45ae.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Oq1yiGVl24CiQqaYhvI5YNG/pqIEKJ6R5NSeRaOuoFXvaAREaL9t7kDuGEJmqYb2blLg5m9r7FFwvRiGXpC7pw==","shasum":"385980abc046bedc1b3e70db1e3ba915cd069325","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1J9CRA9TVsSAnZWagAA/MwP/39u+t22u+wZ86Wo45rX\n56u0AJeXj5tSvXpLF6e9W5Vl3SvNXSPO8g3x8mdWMUZiEy4aBDUPQ6GEw1uJ\nH1/VzgKoNvVjrwYNd2h02Fhfk3YmXQAAyrJA2hJvfZ7hYomx5p8tHc7SkPCm\nxwH/UaXWwG0EMVk4/FN7AZmlRCYqerQAGAa5B732jZ5C7bUdRuA7jRVShAT7\n5o89XkarlUm6KeC6VJgkSSO2nbOjuR7QFy+xV6uH4MjIZegUaZixe2LcCfVa\nO1JPBKSGMEFxDSH7CefrDqxGr8MXKJdpJAEBsFdmbimQI4ubrTB6k3vXeS8y\ny9rqdNnGJx815bFrgnLRE+5i0twfpPvmuybkEsEO2GjjHCcukMeZCnoQvStH\nQSCoUwyJMzWI/3hoqo3P4YxQYOpSvNWZGYKjvZHLpA2hnmgiuNWs/iiJY2pp\n/QkTDvtc8/MJ98jLJJsteqxZvK81FleGRvjPvm22V0H/nidGoWwnAp1D32FH\nki+eVRpq/zdT3GytoyF7Q+G+sR4B4m7qbSIIFaqR0c2a05w3LzDnDGiwqaR1\ndykOlQKhPSaZb9Y8Sg1UsuU71EpE6rABI33gFioEqjd6wltgsrLP6Vrv5bUW\n7FDzBk0s7qQ54yh5CK0kyZH9tjTNot4yPWhwLW9l2/+tS4Ql2AqRwt9PmJl3\nn3FD\r\n=OHp8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADb7K3D3xC+qb7s4xrLVKihjmowWstMGphJF2vcTxqIAiBBQsQ6GbirPezkK4XMZkkRFzDpqlyw4SIRD8JWMHPu4g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.a7bc45ae.0_1594315388733_0.34083206558442036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-button","version":"0.18.0-canary.b184bc1c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.b184bc1c.0","@material/mwc-ripple":"0.18.0-canary.b184bc1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TySKOc8T+0GJdRhfC16FL5nzPL0aWMwbuU1ZiAFD7bRZmE7aMgWY4valJ3DOwoELxzFnilZ2U+hkVA8UC7u/lw==","shasum":"2756a7c99133db5f67e22a094820e8f8dd508c1f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1SqCRA9TVsSAnZWagAA8b8P/29/6i8PfEe7dppc7gVH\ntw6mB2AsQ5vO3YBbip9J0WOjLatK2fwPea1wAU4GHdeNq0LJl8cdrAbXM8yK\n8DcWsFvSEpRKroKp669eO1OGvobRP6Ic7H5yS+CmmUA+7RazcvfWzuq5eT0v\nS2CDnLMTIT1mFBUCe9L+nmzat7EsiGobHjTdnNy16S5kcMl686axgeBHdU3n\ntAYrktAuBCbh33aoRx2VsMtuK/8HHL4emjZnOuNC0vWXKpgxdFkp7p6Oy0z6\nhHeKOdOD39V7lNOOGYIA+QS7vEPNnRKb1ovjzZOJMyfzqMFc7um57vyatx3o\nMiSFoBAthdmjdf1b7zK69G+vodwzS8K+L9r5Js3w7SKXWOnv+YKPboe6qCqW\nnFmEdcKxQB6/fxfGzCqUKVMxSgX8SWz+yT+E2bqRKk7D+ljAsP4uXTBT9Jja\nv7duQPOKFma70tas9t+351URTFB5zLgLoJvekTDjne7fwJrgD8StuF6GwTem\n4d31CLeBqrw+ABzOH8gbgK9OFOY30l8jbNoWTPjHFpFaDiTFPVP+bNWGtLDv\nIOpW2oQEmlE8OER5DBwUNZVdjmyocd70ZYoG3WsX/Ek29VIXIdorC2hLuvZb\nTlogLKzKL2HdQehRpfR3St8wVusWTGSI6asH6g3Um/E+ipUpK3VquBUZPwus\nyKLM\r\n=GPbF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyySzWyuT2Cdpfn1YRqafsnZ/OcNUid8JrNW+tH+JwhAiEA6lAMaz6LJYoR/YaD6L9ORhWIRuBCH8F8KVYzU5ffAxE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.b184bc1c.0_1594315945943_0.9213355867760527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-button","version":"0.18.0-canary.b39fde62.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.b39fde62.0","@material/mwc-ripple":"0.18.0-canary.b39fde62.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WT4xVlnr2Q1LAwcd/aQd7wBCtp6O11Znc8gWFu8HITnenAFGe9Y1JbG43DCfs1f88ZGzZ84sCB7OtbBCeQaG4g==","shasum":"dee9e83324aa153310a14f33bb8f208c55caba6b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XiCRA9TVsSAnZWagAAfNsP/1GSny2Wjbnvt5ZdD/7b\nK558KpOOv5tlt5qcH8bnhOf619XbqbIzqSqKJrba9wO7zSzbM4j78JUFU2Tw\nhXnpJWXbJ7t+HFapT2Qx03jMaxs97t8pHHs530ve9Em/HCqMd69GC/+sFBp5\nQ1KdyG3LC9Fuysj7gQmwhjESmXnBhdGNnMeXBrY1ktxGizVME4nnEz541l/Z\nzwnduXJs2QcXgHDVWEjAJiq4H0c0LJ1mD4wtDziS7ElcIty11nhLZaHIigPd\nJYDmE/wJcqk6GWmD6zTxkKGLm4MDmPTojl/R0N0bXJYWD2CaVVc5mDbaqRvB\nnp5w2UAEx5bopQzuD1A5cGKHY1ux9mV1NZiNzhyV9A3XcYOomZrpj5E+m/jL\nrOLRhWLUfj1ySPdsJBChxckwVw5kBwxHd6gJB1h594OfPUSCSr01v83xuq8o\nnTKLAVZbh9lOKU56q6+Yq/dnnEYAukUMBiIQqmYUUvaXJHhcN3Hhbmp22xA9\ncE4RnNzxMMvCmrviHh9mOf7KPcE4I8VC0DiyZ0rP91rNsOYOxCCESdtOta6B\nhgpo0J9sy2fKmNkO7uMQ7aaHJhdy86hAfM5Zy6a/LmR+1aMfgH4J1gBoE7mW\nzO36HCWIffkY147DgNKupDWbUDfszLDEQkbvifpfxW+LsHqX/v2RZWPI0x+f\nKKax\r\n=/gRD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsi0EecAquPT3D80HmcpBQ2/aBvnbcrSk+8A8cMPVR6AiEAyLYFj5RaSHIOsyUcSTJ6qhddy7Adsri3Hk6Dc1ePlYw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.b39fde62.0_1594316258169_0.7206495168396752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-button","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.dfdd8d6c.0","@material/mwc-ripple":"0.18.0-canary.dfdd8d6c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9tXoUHfmuEQOqleB7mwFFDEXdb0q+2Y1ijRsiIEHX4xvUwaIpoO3Coh8Drolt/tLOAgVnQzhK+pLC62QTxCI+w==","shasum":"25f8b75da1a1ae11118d020ff3eb5aa7f230195a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2EpCRA9TVsSAnZWagAAb7AQAJ2kQMUXUMIuutwxMh1a\nzb+jr/9csvXIyujGGpwk+6ChGJ03U3bQP8kPmIiyoXgAhBD8R/m5Zf7mptAC\nJwaRs6MMPA4a/A2/I0tL1KzkaPScD3SgGPQ5/OLW5v8DWFwLNqn8eiuSRko2\ndv+jim+Nn5RNLmZUwcDy8fGKZ8zz/XMn3lWOQkl12NIM8DH97fOAiyf3H+f6\nPps95BQrgp/Tn+phQjb+STudTfDGMm57cozHzOMwHwpzuO9YRA/M28Nu/e7R\nI579O3avhDWMyXO1l/WujQKMnpYRzTcf2i786hBecqeZnH5gy5BxKs7Ru8vT\ndrsg9QN8nKyKUutkFMu3GpfpYWqN1Sd/OwYZPwsh+fDrz/j21iUw41qSf6GJ\nFdQ4Cz5p35tlteasngslDbS0a4EBi6zc7pytBgbjhJ5teeR4iAzfycbCikDb\nxWqWvo2Fw/6cj1DzlHMIkffBz9N1mARYBGHIGhcZBA6dGq7XRR2ljQ1dguDl\nztL+VrzixNN+WVb5a7FPgkyYQ328iZLbX+vLIzFCXqJOyOP6MOROh1i7GY/Z\n4qhCY+ElYHuTfZgyKx/0/kjA9X6obRbndbHd+LTUotuh9vC7NwfQx2oXaN3o\nxIEXmlKuDsvuVk3R2SIXFvYVuUVmiyqguIyZi2o4mV8alHLKDOO5rMTMCIYy\nhlnZ\r\n=Xs8M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFl+OBB2sEujAx+HtaYtvlBSiXvNZIH34n+tich+9GTEAiBdAcDrGurfAwSxHUS6D33NPmkGqc+f9AOIYlKwZeAevw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.dfdd8d6c.0_1594319144714_0.2995117156591445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-button","version":"0.18.0-canary.11cf2694.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.11cf2694.0","@material/mwc-ripple":"0.18.0-canary.11cf2694.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ApwFMkS1ehneXgNKIz9ZS06TIojf6ALNn5kcI6MDSb4rmc/sXiybmphCwFX64wWf9byTvIJ5HTg0Fr3naN0UpQ==","shasum":"5d65a1b4aa81d6afbae8f501be90e81ece7e5a6b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":78709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4FwCRA9TVsSAnZWagAACcAQAIRWZI57t8ogdrvQY2bm\nvrobeE9XHhfFsMoBSZXkJb6gdqN0rcAAdqYmXqfS6cPmknyHkykAj0rkaA8Y\nFyUFXZy89wIBiOZvUBTbSDqUsSqc100cAOrg3I3d986LgsroxCJCQIBDZeck\nSMVSuNz/ZmNnXdPNxIiFBVS5UbcT0TJjhTLIliSLxw1q+PsambgaChLnSx8R\nBNFK0xuoi73GFJ8KuDs/NraVwTo9jecGdVxqqyFi4Cy/1boAAWzvATLfsIUf\nqH7jPUBF8aJns+SmeNqxIS7dLhCPv8l2X/GMMMZEU6A4uJEzAQYvbztGIbqB\nCYfDYiLxWes9o01slcr3urQ8AF1815pXO+0JfZfKpk8wHGhQu7J7fv4A5mx9\nl698/ZPboMZAePctwiMj5GdOPQ40yU8LHB68CM9lgwPaPzMLMowoU7ELCDmK\n4glIssligLmEpkNyFZzmMnt1wwAMb5Xmt3YIXPrGDiiV214zuMmFDgl5Z6VI\nLWycyCmfVKe6WrVyEATF6Swbbx+QfW4uWPNC6/qspMTAoDPxy7Ajg1a/U/q5\n52t0pxWnWJkeWZatQBo/uu49t4NG2tPDk/ETof8EKEJHU3ARL6DnpOgUW8Rs\n9SfnJ+1X+9fyugk+lcdOhN+M3p6XdObqkclw6k8t62mObmgUb2hSL9atbwO8\nBQXP\r\n=/jI9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3ZaOumqI/aT00uebfN13YYt8/S5anqHohptQXGTV9zQIhAIWs6oA05aBbjMOIqd3ZZhe+pJJyAFWDC9Ia9F1R79ux"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.11cf2694.0_1594327408088_0.3095787572810593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-button","version":"0.18.0-canary.436d66e9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.436d66e9.0","@material/mwc-ripple":"0.18.0-canary.436d66e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CNJaJvOn5d2tLVu//HOYYgql6/cDSL2bZ2tJUeAEY/9IiZAXVv6CdkEN4j4OAVhP/3EV7FCjwlwKOvGopsXT6g==","shasum":"85b7ca9ef3603825017c2f51c14e7870f4ab372c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":79244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KVCRA9TVsSAnZWagAAPwwP/1Z2pyQ6Yd3wZeGKm2hy\nmswwOJ68zXTnQ9SKTALbUObGhuWsp85c5jpcxdpwCRSU0hskYvf2Hhcvf6uH\nwSGaFCSN9DTa6mUol5Og8hnNcMmGM78/+MaY/pLXLREJzDtMH3bUXm7WyvlS\noWIvtxEwQE+z0bWRuuZAzC2+6lR3vo/Ce/4lyVVYV40EjvaXyJI9ICD3Imzt\nQIwgqB36izfhT3sSP9FHzVq+sxAaIVT2LwsYWrv8blxVTwWT/ABtZcBraDmj\nfh5TVI2gHr9hZg+unxyb9Pub3oPRaWwqpfzj54b+3nNaD1qqotn/DdOhNH+B\nXhJ/yFWc2z4DBFECItAZdYzz7n/pTBubFC0p0Bzqx2iYQjoLPI7wAege1NYJ\ny3fPV/N4CjruPZYPEvOQ4VEHzxE149sXg/7PRsp6m8NVoXqgF2oiO+/rrlxp\nu+cYXtgmX4K8MeXNucOYikNhFNltL5R7F/kpRD0gn5/oP9HqRgjElYz7Tm5W\n0GmlFnoNQ9B19Zpqrjykmk5gVfg0P4TchW64JdqafQxLXE6G5cSVWODMk3Yo\naU0S1IYKOKr70L6mGQcl2PJ8R4Rv9o4wyuTVtcqQclI2gV2T80ln5Vwwknx4\n9y1/W5RekvILDa+3R9fbwfxmWAqCpQC/cDNjyBXY7LW87RDcKZ0M7Lo8XlY6\nVziD\r\n=U8hC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3IdRcwlmafTXQ1EczKrmQLWkKdkIprtHcrQch8TEnPAiB6oSJdnEH0+AdZitjgsBCzyz1NWlqGFeENEl19MDVGvQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.436d66e9.0_1594327701061_0.5696861513929483"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-button","version":"0.18.0-canary.3a44d36b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.3a44d36b.0","@material/mwc-ripple":"0.18.0-canary.3a44d36b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"=8.0.0-canary.6ed717ddd.0","@material/theme":"=8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IQmsnzcGWiBk7G3ocFMbgDMyWUzc0AYfhjZckJlr6bIVpJV6ynZJjx3hMOQiDP1fWewpJfFP3H4GfAIOy7KVrw==","shasum":"996ee64285059c52a93cb6b16a29f1ede539152e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":79244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hCCRA9TVsSAnZWagAAwtYP/3/UL1yD9xcR4LJhLnE2\nT5wAFC5Sh7cM5VP8kxV2hNdn3f0FM5dShE6DPIQzm0lC6L2JpiR8lGEQb/i1\nQO6wlNHDqC3HPu5J3nz+xNzWgD5UK0EoMKmEKwLnfUc0DDp8IswudsMoUM+v\nCxyNysiVtsoatSLsrOrLmaL8n0GtdQRxMIdPLnfLqmXMWg+AsDZwr00yuCDf\nY6K4nAepi6se1lYghjICJcPZ7lSydlTSrEQo/AQLWf7iiTH4GFqxXSdUW9bQ\nMJl6aEFE9biLpSNPquYHFVt3SoRsYRN1GBp4iYnGLFVJfj6Jk8uSx+6MwD6c\n6s3ZFXkmetxkbExOYu5tw/nQxq/vxK2oYIXMvHK607y2is2dYBX6mqYXA2Le\nl6NvYAtlHDrQDpEViSSLkt9Cupsg13Eu9rjuHy2X1pf5LAXGNQk81NOAvtke\nxl7/6Ml3F0xCF5iPplMF+d3+nDMEG2qiCeZM/qriyy07brw+5ZT9CE27S3LJ\ntLenbZRAi4FvtnvGhuR3zW3twlx0DZuw5M3A09GZMlqUsodWKrOIiFG86nj1\n4ktBaq2SEHdA5TivUp92bxGnbRHlKNQze8kek0u0GIWkC5jea096niAUUSXX\nZ5KBy4HZQORYYUIriVmRUpb+oEXNUA45UzrLfgFzagJwBJfyr+p/vOUlF617\nx+Ch\r\n=oetq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8l/bFGdM+JEB3W45WjZUub8fxbs6siAAFik9mZCN07AiAKuBra7NSnb6e6P4//Dr8xbS7sYm8MCHKrXjzgGonlYw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.3a44d36b.0_1594341441554_0.1459649149730431"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-button","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.ec11ae6e.0","@material/mwc-ripple":"0.18.0-canary.ec11ae6e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"=8.0.0-canary.1e7cb6198.0","@material/theme":"=8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-diz1PNJrIWem5gbgRbe/OIpFgxMyLtMU7zw0KLAtE/OK9CDPRyMddbCESsA7Pm6Rn0qVSjw+edjRw1n+FByctg==","shasum":"87f1f9a35cbbcdc52cfe02d74c988d6d268f13c6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":79244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKr+CRA9TVsSAnZWagAA/Z4P/3qUFyxpqqgg3HQwiCyd\naAiZsnfHqBJnYBSYY0EmEncPHTAg13N4Q/p/tJGmvTnGZv0SvzXmZV27rMh0\nPfFoSkkVDfKKL0mizNikHdjkHIYOEj7d68fxWNTeIAa6zlgk9R0Rjjk3R3PU\nI3L6+g3WDkQefEHL8Scq2D9NHCiJnQw1sEsY7Yaa3PoiIcZQKcGnDQpQ0OgA\nQWHCeFneeoNH8QpFXwjELTZCTkYg4eJj36/03a8u6+H1DgLN7GqNX4QyhYpi\nX3VaeyTBfTFOLRAw7A8uSP33MTBdIxoPbIRTBo+njiLdfsBG7v6fLisQH4zj\nFNA1bAkPNua0JNkxvbji2enj/atQCMDPfHfaqa3lHxR/0zbHX2RRbloqSY20\nuGTtUh/3nxWsKJJ66UEkrRh5ZoxaLyepqTWcFXE7Jt58IMxedpRmLUMTJG+K\ndWqKsCZVgfIxZ7m3T1LQhoe6nORDK7EDdgzd6xGY07qsX/6tBpl05Vl9uW3g\nVpOvmam03ZHEUKsUotinVL/als7jUZkVUTm6wNR6lCztrjNXhtGN+lwvnqBV\nrzW2psZypdtIDEJpr/mv9WiEkNoiybphvhz2sudp/pLapWGQ5YnDjW59OT1m\neSGifUWgiXKlMnXxIDGYVxU3Sj/KhBZqhXtb4caVJB9l66GI5UIxaKBqut19\npSba\r\n=34lP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICNSG+S24gAlarHYtpfCLthG7OoboNmc1IIG8ceoszRhAiEAmLP6x6IYk+iuM7WkbEdRM5C4inmWhMGxFql9mgC4uPU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.ec11ae6e.0_1594403581695_0.9149349032979301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-button","version":"0.18.0-canary.17f6cf27.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.17f6cf27.0","@material/mwc-ripple":"0.18.0-canary.17f6cf27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.b2edaeead.0","@material/feature-targeting":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TkQ7kGpXVO7cmbJSQ9KfrPL5z6Gw6pmC61QSwFAUl0+XcAG+L9uh3DEo4FXqCd3lvm5uSzFhhucUV2OLBp2Gxw==","shasum":"ba236c91628905fe3e5307878e0e3f4fc7381a85","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":79244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRQCRA9TVsSAnZWagAAeugP/jFzxPDXYwj0KQPIVACs\nqlgSz/reXPcGKPEz+AxmFLAfzSLnCCA2AIYAptbPjBbHmI0XhevJG4d6RxJE\n33ZdYYojRMpnDsBEmJsmtfqdHqXP3tmll5JXTFlCgksnBQd1fI3Ggcf+nimi\nCDu463tMCANkli9D0ywxdyQAtn/jTRTjBFiQnZM0sLuW7pUblNN0pSgwdujC\nM+5gfoHlYVqeWBApE+gl0CbpwtwzFpIghLxIejrlrLpTqoiw6uu7PnaVswDK\nUZvjmoGU2iN5G6eOfqRsV9PxvlHT2vhOqcKYa2UsRv0p4vAxKWhXpvGsg9CX\n1bBCrr7odSX1d4g18o8PdxJB0jITMcJfj8P9vTIc/KT1qDv/msXfZM5E2CLR\n/wnodWunH+BAc7uiKOX3uG6orBgpZOKHgjb4mWj4MIT6XIAVHNgjH2ouEHiN\nLllS4TuBaUacQkePTPDgSwZRskEiLnC5qLSJGBX99H4VRi1WX7V6PuQN6iey\n6o1lYArAHo5xBqa/7LrihhZDBW4x/05WguLhPwS4pe1y5COtTw0wkDReVwYV\niUf8hIuynpHznGrHu4U/5UQePl37zm64LczRDZIAwvG1E9Elrrf4B+6P3ldj\nEv3VG6TT6COkdcxJTLWxtQ+wojrCZKYSnn862wp2/dWOX4owlxq6zGu711lJ\nLRwU\r\n=ud/x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDxOC2uwDmDkjt7ETdT9AlFumz7XggJ7drerQY5x22XAiBlu/DcuIPaBqS6kly4wcljp+LMcq0u6MFozlu/o7XOfA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.17f6cf27.0_1594405967945_0.21092687983372538"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-button","version":"0.18.0-canary.efdfbc21.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.efdfbc21.0","@material/mwc-ripple":"0.18.0-canary.efdfbc21.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.b2edaeead.0","@material/elevation":"=8.0.0-canary.b2edaeead.0","@material/feature-targeting":"=8.0.0-canary.b2edaeead.0","@material/theme":"=8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8brQDGXKix59XCgs9B93Fg9oij8/gO8iSkfwpzR91hlCAMhV+Qm6jD0HZqtSZaH2UshEta7aKqG9m1pYmawOSg==","shasum":"7fc0d75f844847f79841445056a667b6dd436035","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcQCRA9TVsSAnZWagAAsMsP/iknBh88ddAQko0SZaCD\nGSSRNyYO5OlmKteEiSuKVW5vxU/U8HkYcfUQfT8HlBgEnQMZ44lPNTNSCato\n5IjAMDqWO5Euy/XB2EXzh6RJ2oehMgH8CD4Rqbu3az03ZWuwkmpeHC35EFeX\nndEhp5Y9gdTXBJUuE5FsFDPKpNaJNDCq1CAOklm/67RYSgKGe7y0W/1MuoAl\nIYyrAY2g+1VGNeB5Xt2rL57A4qOje/CewhSnAbhNPfa/BC6wjlWtgPjWO7d9\nDxr/0U09bCIbuYeuKZ4O1sgLQSnbVPtopKGTetcXdz3FhuK7URUz7xjpF8/D\n/7G8cAYRI417zAHdUu+0YOSM9EmY4q2uvAnbFcQR09D3t017aUcMfqJmXuy0\nMqe5mT4VizycLt3q+wZtXnkiveGBb7yGX1sxbfArEeB8kkwkNWtdAWtxNS39\ncaXvxF1Hhw4oyxgS1KLC890NYn+M/1i16/9SndCmEjK17X/g79nPzlM/6+Pu\nmOO3ettLk/6Ht4Tnho98lEJkV83SJ82BMYRsYttWjSC6G96TKvAgNhKqr68b\n7L8lQaPSLMaU4scFYv3JPW9DeGFshVocRGh9TR4UpRm3Ma+tO8SS5Xqp4uTP\n7GKmjwXO0C5X/ox7GSQFJU90yyzicg/w5Rq8UL6VBo7Wdw1Ki/Jo9i8T3jja\nvak5\r\n=h2Qd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBce/ohUo2tc2ljkLq0DkntoVTObnx0ZEGs+nBEtmsQlAiEAxyMFIs5UYlQj068heIPcq1P1JA53ossDJFLkjYUJ8HE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.efdfbc21.0_1594406671550_0.813495043513236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-button","version":"0.18.0-canary.bae4339a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.bae4339a.0","@material/mwc-ripple":"0.18.0-canary.bae4339a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.5dac1f624.0","@material/elevation":"=8.0.0-canary.5dac1f624.0","@material/feature-targeting":"=8.0.0-canary.5dac1f624.0","@material/theme":"=8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-PaIwOqZMYedBvMwQz6Pe8NgGcM1hjnwnVFK0RcCAVQv1xVFFHwNIjBMluhzNBkrt60/uucEwIP2yE1pHy0Z/GQ==","shasum":"eebb0aaa7badc855dd5af205b85ebf292d6da903","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBUCRA9TVsSAnZWagAASUYP/0sH+eVImWY4ZO3/HCQs\nj5DZUkoMgKOoSrPv+T65XVKrVb6eInEOudpfVG3Eh7HNidARUYvnDx2Wh8bo\nNqjX/OcJ0knzZxgOt7WFFWdGLtWhlkLjWyM2i3C8Ks5vFlLWpG4OJv0eI6sn\n7XxJFQWA29BR13mS2CYgzOHoKDp855fW33jLPF+i+7Y6tucZiZ4GOwjW5bT3\nk8kpOxm9h+aamd+tkOxXrdxCvGMh7rOAedqZBHiyKx4p/HWwFMsHVLma7aad\nopJieMOGOJjLI7w2ataYK7J8CH3ltA6jmvmq6iD6Cc/wAw0DF51emgdo6Qdo\nJUwjFz/uC+29lUYk1Nq/Q5nPSJLB7iqeppBTLzKieigo8pseucR1flsZCbjj\nSq0jfREO75HW1fXnxRDIWYGM6oKFid9UU/Pd3tCD2S4EONEW3zOdc77y2qCZ\nbFF3akFSsr9hDMWD5PSuXFBhvsOy4erbfkMwrpYLsge+W6oSK7e/mnGElUIp\nz63nC4Jvmoi43nRn8YTgLb1V2u0+lK/fxCkXCZPQp7PWW6nlAeYt6Csd2te4\n9KXod9a4392F/2b5W3ZECNmZX/bUIHtE56yE4zLuYSPH+HXrsEJe7hGs3r4E\nHJHVe9WqGKv0TcBDBzAb6URpwT7uJBhF8hilCuJU/yapDNwPCH4jHCvSWd88\nr0xH\r\n=EsI9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGcJkKekCL8+WNwqPakr6LSUStbo967ijq+/JQl5b6e9AiEAzk+O/1VjmDnzci4Z4XtVOOTxASrje5UCC8jit8C4PAI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.bae4339a.0_1594744916196_0.1664127251276828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-button","version":"0.18.0-canary.28eac13b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.28eac13b.0","@material/mwc-ripple":"0.18.0-canary.28eac13b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.e6e23019d.0","@material/elevation":"=8.0.0-canary.e6e23019d.0","@material/feature-targeting":"=8.0.0-canary.e6e23019d.0","@material/theme":"=8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RfbO6DzbxLr6fKzFzTC+wA8CFfv508GeFvALvwtLivRnxnd81scGdO/0mIx6X+V9rPVuF19G8tF6XMjSnAys3Q==","shasum":"6bc1fba3cd9f05eb3adaf85eb26ec35b3d0996bf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBfCRA9TVsSAnZWagAA/f0P+wYyUQh++0MnalvjlqvH\nrbsTmSQCAfmvt3L7iYBf1763IyfwRJ0N+ZJldI6Ta2yqd6oInEfDm8oLvzWB\nGgclVwaV1TlteaeBcSyriQR69vE02mKbtZsP9Ts936HTGzz9TVe9fPAzII7H\n6Ifcezpejt6HVrlkZ8Md9mYUJl9Pwxm6S70lSqy2XCKf30impGDt1D7NcQxa\nXvDDi5yBCKwJJpqURTNAIw8m72MNQynzrPVhEAvewviUESOm2BlsBaVYx8vN\nmJtoAq9boKn6PqEe2ZAxX4scoAB0x8Ji1wl5PVTUyeUgWdFJupI4bqwqle7H\nRqTwjBWJ4RXEOZ/GeB3+WRmH358YE43iRVPm45OCf7J1r9RUTVhZ2R/ss6hh\nR6vauA/EULuDlX98dprisjF/nW571lE7TASumqr6pgco4Thw4nv7tgBZ0cEA\n1jTxhGy9SRxGk/xxHTJSR9tNi+8W0WEOof1BsySgmmzucYB/yrmw4wiI4dsy\ngRDoWuaDZNA+nnugmzi6MzqVXDgc+UHR62eFLURtym+aTak3GXxXAS8WgDD2\nBx7dYMGFs2MbSZPWV4RX6oqINpVlWrFU9DGokixcWqJNP4kg5MZGZyfJXwo3\niTwDKwUqhUsRPh3n8sZySnEcO9GfrVF6zeDOOSIAXVEXELHdd3yhmDK8CaBC\nxgDX\r\n=GY0P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjJs0EBzwisEgEIe0oXaq26TbQiE/4hAh2YdoaC5b04gIgAssH1v+1sTvkFtReobIYgyM/aI5pTlDsPeoPrInLjZo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.28eac13b.0_1594765406653_0.2151533529838079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-button","version":"0.18.0-canary.44966b65.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.44966b65.0","@material/mwc-ripple":"0.18.0-canary.44966b65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.ad4df58c1.0","@material/elevation":"=8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"=8.0.0-canary.ad4df58c1.0","@material/theme":"=8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wFFkCM3+pqeK/UjHxHxrYj1D6PJCUdrSofUqF7tCwr7G82nXHHontjsqVIXu/EhWuNmyYY5/HkJtakCQ1AI+Hw==","shasum":"a2f91f94ebd555b4595d0c1b7b77ce4f4de46da7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VHCRA9TVsSAnZWagAAoMwP/3kdWwnqYT/oH/fRB8kT\nwOeHZl2y6MPkkIXPorKxL/YfD5KhozXSEP7VO3dKqWs0LPjKWTWqx3G3PE3i\nnl5j5THGUkW9R6RXpe9aTZRyGjMpRCI8lCosiQAtIx5ZYwOCG0cHNCkbgUbr\nqk252EQNQpvZu7SPSURTSwfZE8U1AU/WbSg1XJB79ePLxAhibBW/hzgOIiK/\nBkqTO69NH+K/e4YwwaQwMIoXxdYIgE1nUCv5yUFIh7slnWW7vwHBn6m7lCZ+\new0EK3xqHosd6zabT/7j9cgDP132O+ojsQsgrOABOBWoj/SxVdU6/KRz5FL/\noIk8CpXM8ShbLK9Be4EsMKpdnmPiCPAA7V+/0GDj6rFPNgdmNBzt3mNNL99G\ncXBshJ+UU35h7NVcMYQXqxe6dNMJ6yuh8Pndpt+nfYigfErdPI7l5Oc05l+K\nRHmD/m7xmbZU75/5F8RpGj5sVGzfnbTwZmjUox5Ei8td4CiyZCgsMQPnaoCC\nROt+UAyvzwVVgxKmxTqjY6gbUJeX6Dt7cLULIq+jGe9O7VoFXYaaaehGuekt\ni+BmV+Ba7RTOlHYl9dezvOF0svogKPmiEaBDCcmLg6wUqmber11dnM3SkrJC\n5YFMVuqqdVNj5hwxxrOwYvV4cmR9Ud3bY/rMw9aML8pF1eFCRMvS+Dqr6OT9\ng/Cs\r\n=DWFI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAVvbRnLZHJWVHR9oF5DPvSaRIPR4cvneUQHn8HmDx9lAiADSW6xwqRHklLkCiDcBP0qh8XbEUIoCBPxiLn8cX0IUQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.44966b65.0_1594836295219_0.08842529180937109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-button","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.3ef0ef60.0","@material/mwc-ripple":"0.18.0-canary.3ef0ef60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.01db89053.0","@material/elevation":"=8.0.0-canary.01db89053.0","@material/feature-targeting":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-s8hjECUB3OT1ImnbMypm477y3VTXvPCuY56ooDLtYk4sbt9NffsemQmLZC616vTGHO621pNadN9iSkxrjRHo2g==","shasum":"aeb99c7d3779895d53a56f7120c3afc69c6e5229","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZOCRA9TVsSAnZWagAAbCEP/3NVIi5pU6KNPcbsLATe\nY4g/+91Yea3qy87hQJQBjhdJpbjDF/SjAPo71rZtvRwOSNbeE7hfiULC/grQ\npt+LHeGcxmNWRKNOlX9Bw8iSYi2xzhrcJmlRguGuOR909WL/Ax3gshMLDhOz\nK55vHIXCQYwlf858nyqXvU2DMSK5r0faLc96h27K6PyYzKVAnYAyJx55yLpo\nOfWUWOMK274yyzRm8futmfz3tmoVj1NPM21Kx77O4fyEra2AkyEhwK82LDj8\n+jybcu/pvKZXIkmEI7F2HKUPX/7yuBPZpQs7v1IBa0Eisse8tbeDzH+IRh2T\nJfMIVE2bIV6Vw1kAAAM6JvWU3JtigFvU9betbaKfMN/nxhVebBPYHxCOS0tD\n0GF4N19CCGeUz2WZbufws4qHUfNJpr/YS8k+LE9KUPGEqQe0udgWIzI0W65i\nBB+jVlnpL/HK15jLSj++ibwXh6DJ0rvxViuFqexFVcMtfZTz7grekfOew9Qg\n2rJUVtXUWXVPeQkafvsfWi6WNKbzIEoL9w9b7xSg7bpt2DlocUno4GxF6a+H\nhndxgt9CkWVSRYX5xidycMbAX+Gwxvpyqm2LV8sVBMNrANymTfjpVGTb4l/I\nd26UoNjgiEoyWf3wDLPTnIggkuD0pyeXfW6gzqSFD+KVqlco9I3SjFGlj9xL\n/ecy\r\n=P1mK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdM0uqAOSODXntSYNv3B3hbP8CFUoxoqjjm39SFoTyrAIhAPO2RuAh7Mtji+6MHvLjgaB96Cpzan8rcyYlpzHQpuni"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.3ef0ef60.0_1594918478033_0.03519824584737208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-button","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.fcebf9e6.0","@material/mwc-ripple":"0.18.0-canary.fcebf9e6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.01db89053.0","@material/elevation":"=8.0.0-canary.01db89053.0","@material/feature-targeting":"=8.0.0-canary.01db89053.0","@material/theme":"=8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-1Z8FWDTsuuiSjiIWa+U3BkZAuhEwujcbmfo8ae2QjtcWcljWDhZPIMFwEsGlBGc3T/palnGAVN266EU/pRT+pg==","shasum":"420867a9445013f2118c0204fc7e1e06cccb3fa8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZsCRA9TVsSAnZWagAAJ4IP/0F19wmf1Zf6cbC4zMql\nk+rI8WRczY+Ynkq4/nZ28BXv7GHTpWtuziHrBdk73qtme+VsRKz3aw+ri3gK\n2S2q1Bv1pYB5mTfQZK1DWBEA30lNPINmNG8v0nZQVqMNVDmtNPlyQBChKwqP\ndHM0nftwV6lJMzJ5z2Rhzt70Wm+Ug/aRyCpIunx0LGCAAHX/iMFmH/Qr4D9h\nBo4q+dWbIm4cGoat7ob/C4bb+IsL+Rjpo/SjVWBK52P7J0UlXgL74qkzG5pL\nAZV6BVulmNemXDOqICpycsfcF4JVGxhHAVho/d5kH/LSE+V7oTsy+xDwk5Gb\nwTs0BNxZ7w0HQ5MxrXTGyCu9hq1IYdJm1Aq0dhcLPpwCF0H2mgQevkr7mY+8\nNy7WplNrLH0fX9nJkK4ghcV7IC2BQ0QIZVZP2sSwt25MxKxWYUQfRyiCP/TW\ntTF8abb7CG9cRFo5QSKUOvKcGZnhBbKX0cWcq2eLyq/VyRXbM/zGOBlBz2FO\nZ/eMqW3O1+akjT0om/ftWDZ1OKVQGXiK3bXS76l6a4FwWFMmLHrWG8BqcKeF\n/2KWszIeAKsVQYg4rbxrNUDWGNRcp/Z6U1N82ax/SD5q/pIw+7MwKzd4kj+K\n8QJhyckU3dksbX44Sxq5yeXVaz64QCLCDi+sHnXfpWyCbf6ulKt8+iXHWS28\nEKca\r\n=soHH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJRSsXFH9D0NaQQph2kIWqBIMhow3D0/lFNUy2ecGrkwIhAIeZlYLSKJFSGDwOYV28YVdxGvXi8fos0B+GZrgRTXwn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.fcebf9e6.0_1595270763752_0.13626295951131717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-button","version":"0.18.0-canary.b6a772df.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.b6a772df.0","@material/mwc-ripple":"0.18.0-canary.b6a772df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.fb5a4cdeb.0","@material/elevation":"=8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"=8.0.0-canary.fb5a4cdeb.0","@material/theme":"=8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Xsqi/VuPnGXDBlJQsy8Okw0R/cI9RuVa/IJkxls6I3B4YGdWNBXv3j6vbnSknkSBWfQyEHagZ2QSB/S9bM07cQ==","shasum":"673e702857d2ba369e1060190ac277d1789fb75d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7KCRA9TVsSAnZWagAAuJ0QAJuUn4xgX2t581eDUWph\nidw6OyB/HeO3YiZPkemm5+yn7g1V7F3S5ryQzo0o9yEPCanMvyTFkDzytC5m\n6EjHtjvygSZFopGv5u3dIZOTFIPGk1v0D/otZP1nj8x8CTUDKps6KoHPUcDd\nnuUuKrZSt630CkIhQfpqK9cVO+hvZEppDxTcdD5+X2DFyfqQMszMT3E5Btnz\ngbpyEo29KuYDhw/7sv+88IrtSJOSm4qx1K1DxgNXj1Uw1ig6Q6kJ84bgkKsw\nXY8pLj0z3r8YG8kYSIAGain9T2uoJ85gAolreNK1m4DsXhSwgf7xWQZ+mSOK\nWbvThihr1hcxflL33VbnrgaRkyQR8WgL/iU3/5K+ohqNbKOscj3GrpJylkJ/\nV2WBT0SuPNa/zERxKGHq9HjkcFE/Zzfx4fKBC4D/eLXivkhYTvQzkqjMGKdK\n7V0lNvYOrHvSvJRxgH70RBt/3ZQIk7WgR41kJJwWUPCvnpWsAYPh5S1OSCCp\nXqHj/elcqbL8ktP7H77Cmxt933wEps6vCR7CKpNGuaWBcXAZqeAH3PwEupJG\nclJQvOudcgvCZ73fJrbFDLeAQFvEqVcJ4ckmQZKcrDBTaUwANZRRxMGI/Cfm\nohvJZ0gHHL0uwtl5kxLLTvr8EHez/2tPJyGAaKZ5UoI1U+EejfScV8cKOf4A\nGBi3\r\n=RTmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFiKVtnhifHE609yt7e5OqPnTFXB/ssecqRqeJuIIMyAIgDJAZkz1S5cjPa7l1Qb7fB5PeINOIK5Q2BHgyDSPRqR8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.b6a772df.0_1595285190927_0.3631756171753966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-button","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.f6a6ca38.0","@material/mwc-ripple":"0.18.0-canary.f6a6ca38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-b7RfDRfYFtwr4cIC7od49itES0AozDE4o0IcGFhcnM4Kf83v080n8Ja6eM4rYox+yHfY813gvqAkO5edwSZ8kA==","shasum":"168fd6759a41df273288a71e785887c39fd9acf8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqUCRA9TVsSAnZWagAAiPsP/3PnRqOT7uJuSiI3UA8b\nuK+pUOG/kEp4IzvyBt5P+np0eYcG7S4nmRKIF+qM94T6hOGpIwQJqzDHZZiM\nX8FoeTO9LZKZfGbXpmcTPtJyJa1cDHXapluqUmDtF/87rM33sUdPps9I0Wqf\np3U0Yn6bQ+/7ddUXBXDTvy+01nOHQ9kq0tAqMwPzf+3ms5hI9+OqbXyE2fUy\nxEFzBESzTrAvPPlTyqHf9e1GuGoPBp9LeaHvr9p37t4ZoWPJW5iEPOzZJ3NS\ncLldW+/u2mD5KD9nAwTwy97RCxTCas4r2Dr6YTT8Xlfdm59fKV2ler0qrDu2\nfBzjEkLEJxT51KIGA6ueKhbTE1ZIGk4+8IeK4CEZe8/Qs9XXyH3i+uRcauEd\nOFT/c236g6wfD1BfwjrwmHVt3lC9OmikqFzNGIkgoPGMZkzQcU2fzT46Va47\n6uUp8SAc/tOtLnqC+azWPS6G2RDGPED3cT4vkKHAKae84Ydd2e/mVZGISkgP\nlt30YKtT+KWUMzOLQbjy00a8RCMqTlD/QEuRBRwr+54xsK5LiLe88Bja4eHM\n6HpY4QYnDaNOluSvTYcRtGTU0sx7dIZw9WW89hmyTemSDwyvTbZ4EUhFpIav\nXQvWDKc9T9oUahCSIMxC/2dKD/1TfEYVJPnJ7lbzguN2aCJQiPSqUbsOLFiu\nU2TI\r\n=pcab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSuD4UIBm0zS4zW1im8uAx2U3aFsdOPHTxslhOQgalOgIgBo1Y751XJoBm0WDDyqS6Zf+QY0juQai/D3yDCkQxseM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.f6a6ca38.0_1595349652338_0.897228526450897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-button","version":"0.18.0-canary.647dd6b7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.647dd6b7.0","@material/mwc-ripple":"0.18.0-canary.647dd6b7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZoNz8LNbgn80uAymspYcJNmyn4D/w0IkDbMYsYJ8EHIQKaQ0A6Zn8IhAkxkH+wc1eT1B7xa9zpZXJ2lOVmHZOQ==","shasum":"b17fa81603cca4a1251cb15caae747cc05f3e806","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzdYCRA9TVsSAnZWagAA1xsP/3f2xpu0J4KVX8YKMNOw\ng0VaTDYcFX3sHo/8tM0zdXk2XgJ3xtBM+rLaofF0C72K0PAEP9lOfA+UmtyH\n+/Mex9UjPoa0aESMwbeDQcj1j/ElXb+d9WznnyWcpUC+JXwABbNS9p1UejjR\n8+yqodA6pIHbY07mNU9/4fYr8b6Y+DrVIipVacle9/g6l7WjqvtwFgL10+8Z\nQzk05Zk5ICiYzLnlb0RL+oQHh9lvsSp25ffSu1dpmR9lYyBkp42oP3f9zdI1\nyzFf0i6GBI0BjzgbwgoGWVyNM3aM/XaTrmk6iqG0gHE+7T2eOM3N8ofAig78\nRvF+n3JRNcsIVH3y8AJNNmKgXYZbAiN20Ol0Brp1byWPggzBu99h67bKL3kw\nQofqtmomnLAqKNC+Z79Jwluil3NbHB1K263pKY8xvksMXd3kI5lFT0WcDEux\njiPF0wOktOYXlDDwIM4rk+Z1HQNHob4Spde1gtIByrmSri+c3FsmYZ87ccoU\ne7Ad0YuPlDQ7kdXTO/WSzQQCL72ykC6UfY8r2efcOJQ+FwpsXMtjNJKBHSDv\nIlSHdecZA6ZdN+ukULRjvOEDEJLT0z3bvTNbnGAsbuxSx0kFDmqr5Lnw3CQ3\nhUKt9E1LJ25laVUFTzIr3Y7S5CYczN8ql/Oy7+WVGO1eHJi3DAZRlcs2EFOJ\ntvsG\r\n=Q0+t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaU8e/5P+NmSQl+rZj49Klyx2QO2H6CW5r8F8xq05YfgIgBAv+M/22IAYZE8dtVpivGeTE8CN3B8O3p7B1j59N/V8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.647dd6b7.0_1595357012211_0.9042079609427656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-button","version":"0.18.0-canary.3cb7406f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.3cb7406f.0","@material/mwc-ripple":"0.18.0-canary.3cb7406f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-g3EpWTjdTBJimQ5/LUMR2rbGlxb2s1imj/9HQBV5GecSak6OwZGHQ0YVJM70DcIfUNyjjkgM9p4IhIbYpMtpnA==","shasum":"0e5c73018bf501778206e15d1ae8172680f6a8a1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwcCRA9TVsSAnZWagAAaWUP/iyY2AMAdirOVOFOjjuS\nLJ9la43hsUu79p2V5h92WSMmL99O+eAWWMJjmg1J2YSr1IdogMTANF9gOZIQ\nqhWZZwzOI5HuRuBZ9EZQTJcYa+7U7ciCLosH7E8Fob5WSHVeo4/1gJyB23Ek\nbgo9NTKk0x6A5IFDgyD/fuza/FouPqHIz2vm/rkZqYiI32RzQWEnisyhpJmY\niptAohhwbGG0XKzQX6L0HaHQiRpS4J9t3Spqj4fn4rjJMoaiRKdudaijkY1t\n4UxY/DbpiITWcSQqG3bx0Fezcfr/gbcaQ25T0rdlJXElAwhTwMnFMmSqhHJl\nYFEWNlHRUOcVkLemRrVzthIgTgDO/70hFz54yu+RevxGsHSb47ZtyualNmWT\nEvvCGilxUkdMP56slNSdtqxlTWgzdZuxnzRBjIOh7eFNwPzBc+pFrGS00hSj\nFLXO/RuMtmoREAtypbux3+y26YAObQeGhtlmSPfDIGAz2p5rNXhY7kxgxEIG\nCA94YCS2dGKN3HgiC4ZOjwLBdLhtqC1oTgGJQfSUQX3UitHAQIfxoNFw+SwG\nLqRHVWoEL33y6alMgNGvZ9o67HwZAUrX3QTuyUiJYb0Ua86zbDnAV3Lng10d\nItbWSHQlbIB1lf/9VM2F4hvZTCkdONDV9FEq8PD6OgavY3rB+BQJgf32hiTW\neQ6R\r\n=ui0i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAFnFD5l540ZWuKv1CSNUc8l924/Dn3nPsWAJhxHFDgpAiAkKYkvrZccX3e7XBHfH9yZbdfxbkhN+LCoxo5UJF9cRQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.3cb7406f.0_1595444251804_0.8653065062729266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-button","version":"0.18.0-canary.5717a5a1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.5717a5a1.0","@material/mwc-ripple":"0.18.0-canary.5717a5a1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.abcdbcfeb.0","@material/elevation":"=8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"=8.0.0-canary.abcdbcfeb.0","@material/theme":"=8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MZdOELyDdFGNrYsG5DTBEPo8Pn18f3wePWq9uTgOY/Kbhzf0F3GShYcTA7FCrnql6Y0Wp5LG0NEN7s+vhX6KtA==","shasum":"ed801738fa1c8273c32b850b973f11d68d6305cb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLIrCRA9TVsSAnZWagAAJLUP/1J5E7OwqOpfBP0vHDC1\n9SIys6viQhTSDwO996XVJV94/tYVrCc/z3U+Ub/KDJdHe+LnqL9LhZjU1vPE\nivCukobVeJ/Ggc1m82LQycGd8UC5IQvoCnTQZEpcJFhdz9ie5oHU07Y+kgnN\n6qv83rP3quYI/UBO6NwXzGtW1qKjX3jN1FwzFS/8CL0nnTJwWbAfQVvksCdZ\ngqAIcCtZaM8pfHkawnD94ELy16g8zbpYKTdWX5qbYWQRg8mrDBOxy3yJGN6X\n5g/BIroh+ol1/nW0a3wPnmXq4odwzMngIat89XSZB4eAh8QbIIA4i8a59X5k\nI6kpm4cT0Ye6MXRXqTEin3G4AWPCuZcMbeYXaSMWVZp6WPMYRCdhCOehe+P/\naHGyo0UA2Fuyl1A0HzyRXMIQOrPcIJD5+MsLbBYOHR3fs06frTNnTK3MfNHd\n0E/fmE7Qd0e3M1wrjVU9s15DARC1eQDI15H6p5L7FArrUrjTdYxxoZfZeyyf\nFkRNGFw/F4BMSQNJ/oGSx6g7NQuec/kzTPlVpfwNmZ9iYFbUillUsz4WpzCW\nXK2rv0/dB6gRV9te+bU+GaMLRS+X1oKdHc4EVe4IkaUbbCdWYcvDgb105Hqj\nKEZM7cdbsXBVU4FkfAkcORQLhrmV6D4oec5dyz/qPTjNjlQLWDth8VXP5dFl\nVK1F\r\n=4AuW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6f8OLHe0TJB6EBiiHH0r8RE5hNmmS0vz/+C9rQvd91AiAUgtEvp1yrivRLSWYQYTPKdvkipQedkCO3FACdP5X/lQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.5717a5a1.0_1595453994690_0.5363824084411759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-button","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.d84cd4b2.0","@material/mwc-ripple":"0.18.0-canary.d84cd4b2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UvD5uWI6+DlsubwV4eWXCCwYWjcSXBV+YRto8NIGo3ECC7qpW3pnp7ndTwSCMey875Pbe1ED0XtNdEfa/unGQQ==","shasum":"714b8a32a64c76874e5a33ceca130f76615d4538","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKjCRA9TVsSAnZWagAACrQP/3QIoC2oCi5q+WREZhL6\nhb6Pf8Kt5H16cz9G/D+1NWSxmORjnyHfAR00VHH2jPLe/sD7IBkbaFUejq7y\nJJRsHPbDxeIlKI/EAcj7UD2/V5AwDnLRG7O1Ffq/AnijjMXPD0q9dKPzpgj7\nBrga1QcLt/ZKNpK1m5jb+JEOrTfJ0NmxzmgBNH9FMEkIPUyFC/VYVpZS1iBR\nmBfSjQKgcj009LQmpgA7IZAdTD+TKLXeJC701s3X80UMmPP/kc/wYpjscYOV\nF6TRWTKMHR2wwb8qAOVe1XMcWvXPySPfPrJgemUnzmP8C8uleGeXNjFbrUXZ\n7XRP0vVVycJ3h/6MLMiSOElpRkHfDrDPCWj14SRX0Ue/IPr3VxQuHvdhLtQz\n0bZhMz6pg/a2ZyPlrTWS9Qacf6gjoMRLohBQ/bU5kayj6PyYBN+RgC5CB7E0\nEIdZeItWLCMc5H0MKQwtGdSG43RVMavQhBMOdPr8PtCng14zQGSmyRQuwPO3\nDGSdvsYWcPrszmAPJCktA1fkb2S3zBVq3w6qeLycvVBDWeS0VRVex5YMhD8A\nAxlBHr/C3r/WNyIdPczmw/m2WE01J+wUG0KREzAiDnntWZtQAWdw2LdNR2ku\nOV7ralHD7kQmoqSR4VoriZydLbokJcvvVuyOv4pKgwWOqAhpiJqqmNPYDGIX\nxqAI\r\n=edsb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbzsoqDnhqgbRthfSYaaeRMnAcJPcoJGDqnwncJiCpfAiAp3qN1BpsXe765QYTI4Paj4X59G2tqW/ranugC7v5I3A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.d84cd4b2.0_1595454114924_0.8950616902408959"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-button","version":"0.18.0-canary.f279e7fc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.f279e7fc.0","@material/mwc-ripple":"0.18.0-canary.f279e7fc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Tgjb2MHCa9h7VszDCqYnu3+1zVHbhYADpmcxq+f8xaEVICNbEjOXzv+AMIcyuDAooXhhy4cmW7UER250mkT+tQ==","shasum":"aaf6333d33a12982755b3cccf6fe76d7752d8798","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcFCRA9TVsSAnZWagAAO34P+wcWrBmvbS0/AT4szKOV\n3uIbvsp+sO7CsawjB7O4szA0dp8AMOXiMhsplAxquh4AjYwvq59eNCsMA33u\nGZ91Yeri/nu8IEmLgrOpU9l0L1DsSx/n9e6YIzRD5N8N1dir6tcgYJN0wkfW\nlEWzNdCa1Y6loxRRKjEdZInA4eK1l8A9/ICQknCpaLTEkkaTBY1PmfEa/EkZ\nugpXZ+2ti8AUgofHFtrVoQcomq9HRvf1LRuiBDdTwLTuaIgRjVbe9Tau8kBA\n7guc3UADEgaXL7UsMSvX5T9IDiiSjdtZPt/Si+RCXjVljw8tmVhR95IiwHK9\nvLkTZn0dHPHWOloT18uCQGp4E7VoBL6APMmQ29DRwIxzgJUI2EWFuSVgWvEz\nPo5eut8opaXk3xlCCQ70Qah2YrY6i2eRJOHMyhrRDiAEQ5OiJ0qcPDziWM2w\nxBOwuA3ZAFvl5ruVSkfAYSPlvYCTBOjbse5jHrcRhylRL9ntPanpKHfdODx0\nW9+ojHMc+K1snBP9ygzjqzOQTB5NiOI6+IdH+AZBAS4eSU07zxqANT+y4Ueg\nlRx/aEHdnFZnqQCWgUoRAfa6QNUF2rvOScXtCCuoFXszfozVXTRcixB5RMOm\nRBAu1e/vxBE7TzV2hSi1MnALJdumhXy20WDtXP2GoLMTImRrDzvTnQWgim9S\n3Uxf\r\n=DFDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuICVecCkFT9qv9QMpZVxcACA/Zpfr+troLD9OaJoJ6AiBo2oaj1uOwDhNI29AzxQByAGYNHxfuouC5K6q4IoUYwg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.f279e7fc.0_1595455237035_0.08435184852992816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-button","version":"0.18.0-canary.f181e3bc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.f181e3bc.0","@material/mwc-ripple":"0.18.0-canary.f181e3bc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ENMpKgBs4pgNUJ2wx6LghSqSfMLeTGWGVQS6vauqyS4p+rZ6WTrivhCE0R6Tdmt6PXzHN0wHHaxa1P+fFLUYww==","shasum":"51793e100b3cd3a97b4b0c43195f62eab93cffa1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeBCRA9TVsSAnZWagAAfdoP/35Lz3WbFXPduYQvaRvL\noHVWyb1w/iqx2Qa8HhArHPCwhamy0rATfAsKJDw3oZO3KLq+9CCecmgGPKp0\nBYWlWbIlz6sA405fr0DweZ5hkreLQOZJndg9gw0b4R6DiOmZOHoGg637s/Nc\niIPYtdr0pPamzVWVHZFm83/H3mMSQMazjPbS58Qxqel7p4CSBVGiiVktaylW\n+5mPU5xwPPtLOBQ/eWE68hD+UmdDQzGEt6pTpK0VkayUuwWoTFhLuMUrzCPE\nn83yYZsS3bu24o+1zGL1MnVpQ/TXzunN6Eei44EgGyoc2u+ioujrE/FIrGWy\nvXuZUs7cLXS1PWlHMKQNhsDWq4ZFfzcHDOtyVROViPhvQ60H15gkwr4CE3mi\nIYBGfuyiKbz9Tb4ffT0WUuSR9mC+3c2pPA4GpO4GlK3qcqBXT3XpzXZJ/oeP\nk4jv9qwrcz5JSSp4VoBl9PN8tv487rV/I8QxpxfDq/QWBpJj1yTwPQfFvryq\nQTDOlDbdf+GUP46Tp8+Nr/eguCfCtArxie841pHcDwOLb3ttw90V53anqooj\nLfuOUihppNCZV6x0ElgLnGpHaZKfLo/HluKuKJOmejZWRJrcoxYkYh3TgOkw\nDqWlf6snt8AzlPgsRrAFbEjV29wKwNPhFYECkjc60n4vos8NllQXv6MnpWl3\nr2K5\r\n=TwXG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcjydGqhfNSNu5gGmvmnpkgHdVv/KF5zk2IQ46sjNQigIhAIFjwwHSSvdDw09fyWjTZhZsR1vs706QlJaCFV1tK+NW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.f181e3bc.0_1595455361092_0.4541921558623614"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-button","version":"0.18.0-canary.346a622a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.346a622a.0","@material/mwc-ripple":"0.18.0-canary.346a622a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-G8Xah2O2renHNN2lTjuFuvEwHzxTtAYiq43ALe89pyYQWgS9cDZq94JLhw1MojhxITAJdfaqirGDeeJJCzt3mQ==","shasum":"7b821ef22ce078b998a7c366459e7a98272e3b5f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5NCRA9TVsSAnZWagAAWfUP/i4YyPrlEp0MEcSnfvQx\nLGvNwyPv0bLedpGGu/9tu8ShAeoMKgClZEWhW07v63mTmIiqDY3p5VilOngR\nZvKc9lC3lsy8UmLgkPpFVe4jzMf/wc6i+3QJ1OZWjwZiSPF/3zOlInYEz/1I\nmNF8zGsk9wRQlPnq8j9L192daunainV3yeLQ4URneXY83+MVteSQq1Ca8VGB\nm6DnKx2m1j9xvhZye1mLpF1bK4g9pgjena0E6H6dK9N1kzLr+0UXJ1WyjoMw\n6/4vC5j2MwlEcPX9gRQ4rHcmM/hX5Ux306OMN3CWexys4HvPY3KKRy6QFdCA\njNUxkjvYk1iiDcUtZOCW0s6fSIaRDsJr6Me9rQiVimVfPZRLbNezs2IQh6d5\nJAurCTsuGpDRAxW+ngqtpxsjz2n97qlFxxqi719ft8XcwcV6hrNTyAt0ETt0\nZ3LlO7ip9HksUIp+c/1SI0XEkCYMwzcHjhBqV139Dos/Cx8h44QaEevHEIKQ\nN5kVNVoicOmWyOm9K2nV5YWSgNavd5T8N/k9OY0Pr1An1XXQ3J0kSx6glZjN\nXOUyOz2DoeQHjq8WUwRLzFGsvZ7hm494j2dqJGk1Ku0An3DxLYMCC5dysLmP\nTyhqZCXT6D2IWYTjyri0v7zJa3OaZVKDrRgyxEaLk9wB7chbspIuzF0fYbqr\nIXzG\r\n=kCSp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHtq11yI9ou4+TgA8d4KKrkZWN13WUMEZcPJ5XLXYk57AiEAlwJ/W813jXWvXP/EsLxXPa1UgyiUhzghB1bGbyukrCo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.346a622a.0_1595461196653_0.05653430931004788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-button","version":"0.18.0-canary.c9e8a848.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.c9e8a848.0","@material/mwc-ripple":"0.18.0-canary.c9e8a848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mW5W53BsT2gu7Zs091DnJZZb5XdLFwNxL5uJqnSobPrVpnKrY4kLs/7YUqXfSH1I920hw8OF2hCaGluV1l0t3A==","shasum":"bd0e05b012c2325848e2fdaa486b0f3aa9194ac8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOBCRA9TVsSAnZWagAAQEcP/2B8JRs+EpOO0UXSzHhW\n7fwrKpOeWTcaqnzbkkGxbv1xvWt7aPCnEkNq2SqupV3iTgHIJkNPJKaq+EHR\n4vzIzzDnnqUK2AGnBnOm8MfrQYqBrXcSTI5b4WAQNzDuHmFhqL0JR8b8MF7d\n8laX6NxTW+XGV/8TxEX3TsB+ffjFOzYnouvy9AO8A0w/6qmNjSduwOzGCwrc\n8mAscQ3+b5jVHivTM3EMS2iBIPWakFbDfhUp546KUc9u7aEleYnNVsJ7EG01\nRtXQiVJ/GkDsIBY1amf9+GiwNMgpn9knIsWpBpyn104gy87sMxEiJgKaUWDq\nWyRNRJ4slcsiNhLqo05pFtgQc6BC0oZIE7IuMovaNkMSFt1mcNINWLseDN5I\n86U/EfpDQKd1kIy+u/Ghd4ez96HAvsXlLRiVAbVpwocPn2q6mHWW2QEeUrgQ\npdwWnKAmowSvU3YTBSJeJ40Y2i4B/qfd2h//3M701f7bs06gS63lV1+uNJb0\nt7GMvWzkRkO37T0nEr5a+y6e0IYd0Hcc4opDy6PF1L81IexS3w1CM3xRyOES\neZOLGKhZuhqRkI1dc13RtaX8SBKIUo5wE5ou4dGcvnH1xLaQlzowVKxSrJas\nAvyf5sRqdp+YtFkaaiG9na7TkiE3QXnXgjq9+a0yuatsDN/xwOxymhLod3ti\nlBSH\r\n=U4cb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGrm31KprhugvX925UlOPBtEh/Exhf1ZbMovusbESo/sAiBo9EzMzCwruECvpWgFbYcTsVsCApQfjbZAziQThK5x6A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.c9e8a848.0_1595466624946_0.3654028965829681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-button","version":"0.18.0-canary.718c385c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.718c385c.0","@material/mwc-ripple":"0.18.0-canary.718c385c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0UASGOsUnftRZ+w8ey9e7dhT8vC/VWIYUBoHNExfK0IeKAGPfMLgaYjSQV9kWWc4ojywxQ8Gv9V9sqOwG44zAw==","shasum":"35e443684eb8eeac3549ccbd69cb93cde29a5c42","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3HCRA9TVsSAnZWagAAw8EP/3da+NgU2wwkU/bprOLP\n8AMSZz1e7Q5nmVp9Ign+Cz0/vN+WRIaXK78uCYHNfxFYILlaJK6PLWkVKf0H\nXzhNZ8urbeTfPN78j7RDJz5cSY0OH6fn0XGaPVrv/l51xt9fNfPffP//Uwsm\n1+y1NplbFPXzKguiqaqh7UQhVO2KrKkwtYFyZ9RRbyzZ0dGx8/95cNLrrJqk\n+udpEhWHoHPQrcn2QISdS88dINTa1RxxYM4s8HDmrz/SErR1DGqKegUyrM3n\nn5XSnCge++3TrXwbgvu+PEmEJx3oX9VUmtoym8bLCSnVehlyhGcMZ/yYOPge\n4QLKMXUkPBemUqs1u5Wg+lBQzJc/VMOd4eWQYmAzr+6Ij4uUcpw5Jjlrr3Rc\nQYtrub4BWNtmf3QIpo/zIEzisyhQVooaYd0GCgoQTIbGny7sjZoSVDThV0ds\nr4KHEpFDN3gb1deM3oc/hwA1Wq4NX8ICAwnBSsXYfq/mk5bNwp5yk2V/+GVG\nm+5ehe0Rx6139CRjYuMoXeaVEbRoyWv7OdAGe3oCTZRmlM/n+A4/EpU46Pn9\nhqw4rym4JzhY7RKIZaRNjUQ1MpUX64XIpYaTaWEwOMXJxfZFlqgNHqwKmo5c\nHs8p8KEhedX3AL6Y6BD7P6wy24UlFW32VTgx2luILHX2Pvq749YScyOCNDlt\n1FJt\r\n=eMPj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSKVLKt/60FEyEI7XXoLsgtJ5hgkG4mk+OZdzs756CkAIgbZZEFTy1a7BWyZyiVeh1op4rlCqXQwHeO8ujiceM498="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.718c385c.0_1595534790735_0.9982342045043515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-button","version":"0.18.0-canary.cd516a27.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.cd516a27.0","@material/mwc-ripple":"0.18.0-canary.cd516a27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-cXgvBhiYNB3F6vtWgEH5zCA6B68BY3fUImK7wmmhn8LLYzP7S3k0DUdRYl8GzEAMcGgVcyItkP0Au/za/S/W/g==","shasum":"ee7554c3e3c049b362df0496e1d3931b7f92a154","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":79287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzI7CRA9TVsSAnZWagAAE6EQAIS0BQ4ioY3Y/vFB1qQn\n3mQvmnZsDXi4ebQs7h+JgG3cslCHQzF9tFMVZ9esadp9OFT2aWrgc6gumVZK\nYFjEJom1VV8NPvSfXw4ezcDFX9btsO9aPgAKL18ZvnttIndT23BvCP5MeXTq\n3+6trzi6YMD1gcXjHHsRo8bzOZrKMUa2zGa+f97EheJgSOVnNXhkZVs/hMaM\nWt0kRwCaJi1MPyE+H+LMIDFqh2VhNbKFZLtGIC4gookrwUR6cFOqHHHTc4xX\nh7dcK8rroiIKEOPMc2pdJDjWD6DNHVQ29tKDRFhSo6cF0T9W0s+fnIe0KOE2\ngg1JggsfIpXSaiMog+sEcFzfnSh/swjwSNcHJdg3crGWQQmPdcaxWl0lGz+A\nMHvRz6dUepH5RxJsb/4s9pTSyiRykTA8gkj17jMOkm0T/IldWl3xE4xmQc9o\nyV0GwMd706GMsXACQJbXF0wiAtg3EreQlN6UngU3J/XaJdwm32GaxIn8756R\n0qynEwAW+Uehy8ESJqGfcxYy6u9ep61E1kbfXIpbIskgGjtqr7GuKlpt6XNp\n9GIpTQ8wRN552ykXHhDoAErSaFbYvyFNNmt73CxwUMM2XlMBaRloQoCKu0E6\nYw96BmrzllWB/rkwLGxSNXVdtE/vJ2MbvmOLMJSzRvZAELi2ff0erAP5XCXQ\nBoup\r\n=C6OZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6AUmg7s7r7kQZQ1JP2Vko5djWclRvqoWYHQciHFwQ8AIhAKNG9gkrU/1/qVtXmAMYu8r6c5O7QPK3d3u3RLLjSJns"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.cd516a27.0_1595617851300_0.8184936544612738"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-button","version":"0.18.0-canary.1f082191.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.1f082191.0","@material/mwc-ripple":"0.18.0-canary.1f082191.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XiLh7IkzN97iXorz2dF24CzQ8zJB+RnWFEMAB+LAtHm9Ck8J+e946jjxCBVIhQaidqUFo5t/+CT7bSYDDFZaOw==","shasum":"7cc2f3f12a4c797758e55af2ef57b96aa83f7a0a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":79323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzN3CRA9TVsSAnZWagAAP6wQAIVPphllT/Xps4m8IYA1\n/RxtKz7TJ0+60E5hlOkdj0o9qeSzAvrOCItUio+Kl7sccMpahDSv90WhtzWW\nvJicqVCbYwuVzKrBAka/FDUahoVoBFVrI00JMQfYZDljihSjht5qMdElWYNm\nYHnF3ZPZhNMxbRRzsp0MvQSNJmswqh0vV3QGzvBfoHauXb4H+V1tej188Hs6\n52w8K6GJrJB70V5PnjXSLwrkR2VOncz9DEJCDzpA2pPAtoQxUfk3u+ca8SWv\nMgGQivCZ56hqI2qC+Qb1wgyl/Dzb+Gk13OJiaRnoi859CEiVTFYTYtLG5mDi\neP9poRAldxmglPe5YO+aF2cn4FcaJrpEzqedQ+YRDKPtUWFZinuwGrw92zOh\nJUVicfrkiov09XvvYpd3U+p5Kidx0R+NQmlnFjZHzvi0wbKPx731TRYN1vCf\nBTl885lp66aAvr6AtjTXqWRCcYHiuYJg21rttXq05C+RSykW54IDHq04PKdn\nmL7Hl3ACvx5LnLZGpE90vnCFyFfdyE8tk+mNjB9PrLa8crTYVpYRycO9jiiO\n4X+l80N5IbXlo7LTm1aoX2XU3ZyyHktpRJKsgaHdPW+qls61B+nt8JjTCetX\nl/61sSyiuheELMJQoHPw6u356OwXCLhhQKvo7Xqzm4zjQ4UdZha+MMUVvlub\nsnZF\r\n=kjZU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7UTrmev1TSuTe13O8T3r4JC/5v0DQTomcaaRc2V+2TAiATEJNSgwp2MYSAkI5O9GfD+EFyWZCax74OmfpEfC6YXA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.1f082191.0_1595618166808_0.5461791587996114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-button","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.ea3e82dc.0","@material/mwc-ripple":"0.18.0-canary.ea3e82dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.7bd5075de.0","@material/elevation":"=8.0.0-canary.7bd5075de.0","@material/feature-targeting":"=8.0.0-canary.7bd5075de.0","@material/theme":"=8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2VWGIBP8YqL7nv4/MTMiULXerqhNKDA//epPMjQVp7I1tXbDCpvIHIfulCQJLZ2hibp7ut2WH7AQ4DJR+mC++A==","shasum":"515ecccffacb040c33a046d15d3c5dac7671d0e1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":79323,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzSwCRA9TVsSAnZWagAAyEwQAJz80S2U1H5uxTFyG2bT\nUFrjgjWdRSfuGltm2DkPFnjUmp2UZ1wAMK95zHtuT5ioovio3/UxdcHXgzh3\nV1+zXrXTQIuWdoAy3HDT/UEa+OV0g32opnP1VACmDWyGGayMCViZkJULCjQI\nykCP28bKioWzk9gPahVAITVBuuwyI++ff+HFgEOho7ffSKx7/lOKn/5AmFLe\n95KEAJvIPQ2TVIbltoXib665bLnJnln+uN/af8KCQ3y6m9xnV/X1HByTCSjV\nl9FVIAWVoRq101FVPRc0IPgCfqmmFhpm/bbiuSDh5MePEmo8wx/tJUJ04NB1\nQZs6oNpGkmSi1mydmCpfE0+qQlDtIzzZvxGvYjfPV6UJDwk8U9osWMMfx/hN\nmiCpqWzGtqXP4BhjEZSCyvv0E1nZh0tn2on2dW+3USCTlqRViwXh5LJl6D6t\nBauwL/ImFWeos7FRZFkApP+idk+uDTwVbbdGzolUSNQfVZu/EaMXafKF94Us\nXGwwUe/K8MLI3ywud96ngWvcGQNCS9g1443ywKd0B40Vk77fvT5go+zf5IuC\nGMEbbRIwybqKFwgp8RT1W6ehk7nD/a0/YBipCxDWno31wu5bJ7BZZew2N7EK\npZgq8pzNYl2zHkyxMJxZXG4bSx+FBj/h3rUa3NBSQCmvtMXZuotfe8zzm9S5\n542D\r\n=rgKU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6f7pHYMIsbbKtQaQcVQbDcMyYe5gDIlBtOAocOnaO8AiA1Qv0iQ7TDoh2i7kdCG9kl/AJrj2YvY0zQZghVtZS10w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.ea3e82dc.0_1595618479733_0.7847359335294002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-button","version":"0.18.0-canary.94987b64.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.94987b64.0","@material/mwc-ripple":"0.18.0-canary.94987b64.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.5511e0aeb.0","@material/elevation":"=8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"=8.0.0-canary.5511e0aeb.0","@material/theme":"=8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vRymFSZlYk1H15tpCVdNcymf53PkQCCi2JPpFm7mV4wTt9coI9Ndj6tf9TnT3Qll2P7nrET/SmrJbctl61xfXQ==","shasum":"df0c00d9953585b007b19dd487795eaf99a221bf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0P3CRA9TVsSAnZWagAAzTcQAIEndKrTOGwfdzh77iU1\nnu6m0eSlCcmPrcVO768A+tyG4i2WfhPSD09NlbPAuzVT+w0Id+bVFQSWu/ep\nks2t7XqVdvpC6uUaO49d01mmeQNnAPBULGk+oZ6gvc20ZpvcAvI48mEgTQNy\nn0xhoUznMB7QdFAXdVckkV9K7aIDwIu55MfTlll6Y+UTuAC8O4o0nj09F4rA\nlCB49uSulYEqya195/PIHTCR3h7frFsYWKkLIUoNci7P/F08qK/S+Zmjv/BA\nEmJFy+McX7dcjFJ35/unWOgRMnh6k0IKZvgaPE+2udBYX3KNlC6DjFbNc1KY\nCKlTJiZaoaC/Y6P/5If+ayxeMWwYy2dlgFQRalTJ0FldBKyyGGxpstiXyyVA\nximBWheh8LBGw2fhnF5SIbagC+XxScBEHc2ZhoHt6DB5qLWfRX+PcpWd4h9F\nzR3DkJ5TMT/uLHRQsgK0vlvPApBOt8lcqAOk23qrDlLSIlEoLYhV0Pb7D7eB\n9kHpDcu6YuE+4J9seyxZvOECFe4GsOmS/j2GVQyJ9NVCH6xH2uIf/AStDax4\nUUJcTzo3QOpgp0Y/djnoiUZU9iGSNy94RLg1miuT7TCNtKmhyHU2Yl1ExogM\nNTGkHt2ih4TQLx5gDq6y7Mdw0noVmOBYazQYFP25GWnErDQdxXholkeuX0LN\nvPY+\r\n=ksNn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXYcHAN8pkradSE9ySXASUxNxvXNebBQRz7pJj0LLjfAiEA09+mZYy+G94JFt4IFoJFW9g+LcCwJx7UBDbTntkij3Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.94987b64.0_1595622390646_0.9819970094966517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-button","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.ff49b7e2.0","@material/mwc-ripple":"0.18.0-canary.ff49b7e2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.ac405eae1.0","@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/feature-targeting":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UZk87SyH456AczMSXvmK//DWf/Jc6xx6ikaRwCa0yZmoVMizBBr7P6yBXOj2bh8EP+5l7BqNwmYInuTgDtnhKQ==","shasum":"dd7a89a07dc86718c0b0735629aa84edd3af2523","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVSCRA9TVsSAnZWagAAQJQP/1WhCPjHi/Nt+wMd9KR0\ntPVXo22F90gWJ9VFpAhpD0YfHKer4RRCFFBcYlLFwqzee6GrAvtIQfterjO6\nO2g0g1gDLsW4yvR6XdRqtVKEZzKeblDQ7nKpBwPeFt/AgOTL+ATnqUmfaxqK\nsfaRDrOkX0hyvRGkmINCvIG7qVnpEB+r0E9WqrjMKTyQu99vd0PVYq59jU3L\nsVfpLo9WCg7ptEzChk4Dj3vexaeYFuP4SmFFSimP4wA5G+3w/zZJ0lzSuCs+\nZw1Bsk0avh8KAvQWzw+wDXIwbzWV1JJJV27ew8HoqSxuW0OQFy6Rzc7NjEU0\n2kUet1mEbAJT9qoXGsusgDqcSGQHhZJNmGB4I35NfSiypjhq3p0BX4J6YqP2\nR2pQGgUIECmVjbvnn5VGvDvZuzdFDYZF4bd4JDINYxmP2jnTdwTYiLTTzo/U\nvuzNpO4mWx3X3I+IqDWTSPs1VF9xD2uZ9pbqLbL1U8Zqe8F+xIsQ6p1vIj+/\nUzT//M4Gwd+jcEEPMVk3ar/RrdbSsX3joYa1DfcNc/ZIR/tnBmZTShJUHIbY\nBNEcXtEwaHu0gk2fkmxU9ahxevyXWXhnimH96DxZ2h4pIzh+dIqetPyRueap\nVejIorWMayp+RW5Yk3QMdqHbr4jkZzs5gRODwHEfbs+rrktdMMnEiEYd+Br5\nrihR\r\n=nLNh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAYWm28OP8i67Z2vQ92QbjbEDDFM36oMyxhTGDtd7IigIhAJA4Ud9rgU5RJiVvtyJ9Z70zIZO5RrXZfHzcvaSiAsSg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.ff49b7e2.0_1595876689988_0.306880314828506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-button","version":"0.18.0-canary.3d334ccc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.3d334ccc.0","@material/mwc-ripple":"0.18.0-canary.3d334ccc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.ac405eae1.0","@material/elevation":"=8.0.0-canary.ac405eae1.0","@material/feature-targeting":"=8.0.0-canary.ac405eae1.0","@material/theme":"=8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ne3GiuHVfujlhSDdJ6UbDp7zGHIHBIexIAjREPYFGHqH2yF+iwrFlmwwDMA8KdtsZsE216Yi3IOsW9BESNtw7w==","shasum":"d12b776abfb0f744ec1f74f55e507c95ddbd8ee1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8RCRA9TVsSAnZWagAA/UgP/2NQ48tlU0NhGnYyg1xe\nBoxdypeN2cAWGP9OwBwcBr/cUtDjoasE7p6EFDqVwc/OkePy4rh/UWGrjyps\n1m4zvaY6dqOd8dpFG164EHKIIeT/mWQMxQhTllBAjNmxEMl1SDrTZrpKFjDB\nE2TZeWr90U/Uj0iy45WcbaJ8vNjpqh9RrE8DWp3NhVymWp51OMePUkxn5/33\nDPBZWfILmsNgwi26SUkUmBTy70m6c83dkFhDaIYxmk5JQqecXpLyYDhJ+8RA\nyksIb5LbGQA2NK6JwIKxfpYdlCVQ+MtlChX8kIp2C/6DOVYa9mnJI0lqNYq6\n8XVoM6/Kl6bdjlKukDJOO3MvFLzjmBX3h4XTD+RtGAEae4pTey6ZUZQX7i/A\n9WcsVUNXHIhzZiSTuSt5/UJSoiE+8X31/rAgj4pfc+ZvkSOPVNjnl+wKiPit\n1Om+AP8sItAja42DpuJOGaiU4LDrJFWiCxMX0SCQ2UYn2ao5GJpRQ2PbGEd5\nnl8JAkwPak4QFnagKnrwCmHbg3KUj/ONLZqdqQBendbPCWOAdhYstKii1X+1\nzlTmV1SOZdhyqTH77cP7A1gXMbYksxhzugHCULtAdI1h0QUUHYK4kmw/3GHv\naKS70SaX0mSOZSiKdjdiOfzHZxAZGjDwb0Djr/PTx43sBcGBsY8lfHK/syb8\nHrHg\r\n=+vei\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH4MpNUwsA0MXPN5+Jp3UNKk6G579nJSiq/9hn++LPnmAiEArbs4K9cmINm0+cUb6UK2/v7T4imjsa3fOoYvNZx8bT8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.3d334ccc.0_1595952913291_0.9368911357364629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-button","version":"0.18.0-canary.82ac569e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.82ac569e.0","@material/mwc-ripple":"0.18.0-canary.82ac569e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-yIXn3sdtOHx/uZs9EvgHeO6kQnAWbJRC5zCB+fnGYfdbMEEFkq26H6sI7wHXDPN5J+KgEESNZerHmiAfep3dOA==","shasum":"1fc472a870bdda3c5bdce36294aacd3a09d71e00","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGTCRA9TVsSAnZWagAAJAEP/RrOvggu/OyDrrh8L4TY\nFINR9gR6dbERT68EWhEjobphrTbC2NalUDT3VJxC//ocFN+a6PTaOUlcDnQo\nAbULmgKHb0SAGZ04Y/ARBCUMBSz+dRphQ/Ft2lurarcScoJoQsHSbFLaEC8v\nDY+DYiH0YskSzf47cdFLWg6RClQeqFSldSbu8oNKi47d1R4KBX9AHqjC8Ofl\nE4T9vKcE24es7mflPo0Ihu/eP0caTxR2lR8UlrKIm40lJzqoVWLNtDXnwDp6\n3m5h7GAw8IEwAnIr8JsTOy15F5TGQJ1JI14P6Pb93nNse3FK1mjmSeEMncdi\nJMhBJbyAmeQvetobV1Vu0o5wdgHPJJUXsAAtv6ZLdoqtrBpInFLEeN52cQtT\nBBjoXUHNNmgpbQRbnwhtGqqL3/5uicM4tGFAPqIEvm3dIqq6VncZpI4Nji8x\nzjR7StR9HTbrgWjqMt9a22U0Q3rCxYA0hW/0+nCEXsmZbhBMDk99jbTkQCeP\nU4qu7egz8sYuaQ/eSEjcmWgt1RH1ivL4EN+DXJL6aFoYSz52FrTcJt9OakiX\npeDPziss+GNMpBE8X7HzqA3ihik3dDDDsz6uSLh2khUCCEZu2djfkwc01tg7\n4sFF6jEspEyaU2R7KK5Xmq57yJygO/ZVJ7trY6os2yhmripM7nQu5pslY6lB\neCXZ\r\n=1Dn6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9Ui9DNX9pMypGsD1uLNFNg7y3RZVEDy9A1NFEtVjiKAIhAO1ESdEUO321/vnuw8bHj3+tGC96KjZtNfzkGt6f+1Fj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.82ac569e.0_1595961746918_0.8853007491633187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-button","version":"0.18.0-canary.99df7397.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.99df7397.0","@material/mwc-ripple":"0.18.0-canary.99df7397.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7m9cMW1SqOJD9LXauKTpaiSA3P+oGI2mUc6r+I5BnnojtltOrlhkV20C5yhJXnb6c3q/4Qadzg84Dc7qvpw91g==","shasum":"99bba90759d58999c5eb5fd498d0ab3d1a71877a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGfCRA9TVsSAnZWagAAtUgP/RIwz05WUvsOQRGm+mgd\nrK8A+duwDMqgskzl0Kd66FAmhZNSzfWNK1buoAevA69Nnp2ICH9Wcc7RMSrf\nEv3zn1yseJ4gaD3tpTrY/Dl+Q7/lOlTZDpc4KPWw62Ri4ze2xl0NxnseMfGp\nm8g9gufMymU1pctxr+JxOkT33AsAt5J1W7m2q0TyueiHkU8eq1O2GYk69Mo1\nBO6lcBS9bya7LI+7a34HpGJkchEpUe6jaCeqfD2/AX6wuLFn2CqZAbugMAi+\nAxp6diusnhWEnLbixi5oj+R1KKUeopVDgITUsCZ4sKpn3lAbpMHQKDSnR0W6\nr412fWdg4kAyfB1Zp2ritEpm3A99vA9CETQBHHre1zCJ/wLMoiaB8CDe5Ci9\nU8NNVI/nko1AluSZ75qcA7ZW4uumuL/xAn2PsVeFB0fsY/uS06waogsCK6nR\ndpe1pfYwy56xDhT5mVxihj9j2uzODUnQ6mdOy4+VeQL9HVNW66eYM4jv6TCD\nZsWHTiDEIqdilwafI2SPr1eWnQBSDaLG1KbLrmIlw/mO8x0OqzyH7Czy+Xst\nbMnN4Oe5YgMHPcZGPu6cL7y2f5WySqJkj6nr4GHSShcUNFU5omB1CNIj88zH\nmNOtKkOVB3P4hHSFKMCRsnNJ8eF2Bpn4AsPMUNNDKLo0cAx7umYeqfCVwyHQ\nQt+z\r\n=lGCF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoXbZgfFoJRVINXWQwnngu/g6KSZPlS63JornzMegQXQIgbv5JrVgSKs+NrHO2RrKSCU9cYPTA0NvOCUYj2Kac4m8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.99df7397.0_1595990430789_0.529002145433314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-button","version":"0.18.0-canary.45493e05.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.45493e05.0","@material/mwc-ripple":"0.18.0-canary.45493e05.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FFPRS/ruuSyVvBnZ1p/PF6PGMCyml1Mzs4DInYy2Fyd2nzi5MZ7AhPfPXw8b6EEX6o/1qgPETtDN3h1KwTGwrA==","shasum":"18e1e78b7a4d3f96084ac7ce632ffc0c1fa4456f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa71CRA9TVsSAnZWagAA2ZAP/3embQFSA9rqNqtZ4Obb\nTJ86s/+mXVFirgCw9ulneR+rSpjwi8xvNEGuwwjWt9kNgnKOfdFD3QxiI02y\neGCJ2IAAipFRiDbKuBVBetC9c2A/kT5CNhbtm3jYPxSLrzkKH8uwgzIUG1/4\ngXdJMtLN+A0L5xNHVSpSlVYSGthXmWqCutVEbnJ4bZCmWoCxez8OUgIydeFf\nUWu+Ex7duhQ4zk3xFr5Jxc88B//jNK5+h3X5lutiQDREwB3EmgmPojAb9Apc\ndhnNmy42UQs9DhGYIcYjc5tRbJiyZXnWp2Sf7HBkZU213oVut7lPXLzPYIVP\nc9vYh4wFgDf+u6mzbciJX9OvBmfGryHD9LOd8FsH13Jd3zImLMAvkBwObXZz\nWFTbi9P6zNutYmYXgsKNlThL1r9SdSIhmGhF7vqQEsPHz0K05kLUhTgFWl54\n7FN+cqvKPQr+5wUsR7wHSMXQZcGyuDWop+IlIFPuztIkGcYIaFy8l3XYaf3c\n9R89hwMSc/SA6ozab1hM6y5tH/vkFkupXYEj9zTCx+0qEsWWPdWLqe4k9rAi\nQUnbkPGuqAfxFe3BFKeraumsylNXhOnotuqN6x8T1TqHZxlro3T+bEblRQwV\nq5m6JPoy+g+efro+Xlqs4b1JNcQctcSYdfpApxBuwwt7gdCAX4RZxI4QEUm0\nOWQg\r\n=D2Hj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFXSgQnEEsmdq5zOdAvkjDthw9qcoK8U2yxHcoXQwkhAiEA7nDIL3iu/XHHzk0gAhCbAgUJol0j5CdvscuF/6omfqM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.45493e05.0_1596042996484_0.6816670334927635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-button","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.f2ab0a95.0","@material/mwc-ripple":"0.18.0-canary.f2ab0a95.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-X1QzyTdwQedzQiMRS1TGtZ8IkLWrC0b6cmSt5tg4sxWjg45jb2hSn9lyMVg3PPA6VjTiBo1wabSTF06Ip6TgBA==","shasum":"1ee3ece1dcbc902512beb12a333ad1a86acf7bd8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAaCRA9TVsSAnZWagAAtX8P/A5jbVQ1X2jQD5CSh2ba\nXdqS5avxJZHqfE2yMIVdlgsJYurpZrpI4w+2sjVxzAFcpTu0Cq4LydxENNUM\nyaUXiyO799LIaEgoVJg6lWS5NZztx+WM5d5mVbeDa6Zn58dU7ScDTa1oNwd/\nUAjLcnWtrbwnxAXFi7GZOGllv9ZeVX7hNeZyP+HFuEhZJWyoYjZfeKjaQIxH\nlKGACzhjurU2RexF25k5ImGOjyLMdKUHgeFcINCfc7ETxdCb6O9yFJzGzPE4\nUvE6QAov4i0kEacPpNW2pPFeq4uVr/tchzMO8c6PNv6uESLoU1VARkgZu4Mu\n4IQei96/+fOFUBcqcV+i7o9on6s/cdRMw3uPvHG3+i0JD9f3CxJ35adwqZFW\nTH/QYAIdazEuExQI5kPJEUKdCenLAwZ3Wm0UmEsJVHcp1Qe+EE34Vs6oqcni\nhwtTwnQIyaI5Y+39aXAzoBKn7nT2kQak6ovqQOlmqC8QBvRUktCnyDq/UFaQ\nH4Vh3eDDaGQriaFDtPHimr+EWX9o9yUzNh4ODTJA8TZFJavSmFCtGwFl4WDf\n5Vv1Qx64CFL+hdUkTuxinahAHl/B7osDkld1gsdFtJaFbVEANXk5VpMBFa3n\niiwe4lHVIPeegLfHqWwV4FzhkQdUaDrfm2yCCopNR7fyxVi80D7+seqoYcGB\nKqOV\r\n=ZkKi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDPfOY28Nh/VYXx2dCCRfLxXj3apVoBEwgqnkQPcWJbAAiEAkVpUtFnABsQ4G3q+v24gR3xQZN3lnQwUlYvgYvhweVE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.f2ab0a95.0_1596043289882_0.654911161194002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-button","version":"0.18.0-canary.45f9eddc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.45f9eddc.0","@material/mwc-ripple":"0.18.0-canary.45f9eddc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-sNd5BWkQxGSrIlCdfKRZGeuQDJakn4k7zYR1MLvCPhxI4fv3kvjKa3hMq81gVvaD7XWbfrXGcFrsLg5OWcg86w==","shasum":"421987021287ef8469f67296254355343ecb7c9f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhpcCRA9TVsSAnZWagAAw5QP/jw16MXN9YVmT+YU0tAE\nFgrMV6UvKQMve1R/3raoSGV8TG+Uv+UNtJu0xIp8oye4Q5cWNv0lOLjbvlY5\nU+UEvapRik+VUoVp7qLgIKwSpGjVw1afgBghxklUO5Yz47G+JQsMftInvuW2\nuW3mSd/WrdLc2CnrBRSq+GT5fdAPgtONQYKqSxFZyByFEjYjg96zM7SSOhyn\nf2EN1Q1UiCtr/LMQjvWCTle9OQknEjU/VY2uPMOadUVExsXo7FgMq8NfopQm\nro7oJ1pPQVAw7ehZhI8pMSEkumST+VFv8ocLGmWOL4qU14zMGSFteG88X0IR\nfmD533Nv9DRZ7IfEkk61tSnavliFDIekYLz7u5WDBs8xOB3GmMQHHtTPiKXx\n3grQUuxnLK8vl2HM70mXeWGvfUg1ds24U2DAyC7VA2VWld6BP5L7AZ/m1CM0\nW3jxGhFKJ5SblTBNIiXJvGwHukANmq+Xt33t6SlI2LoX3a0DaDuX+LtLHp2N\nvJSXEnue/altSQrUpxs3ACbIt8TUtf8M+1ptwT8Ea/lP4rTQ/feQRTJgFxtm\ntp3n27NdxGI3EwlLTBvKWgSP5pEneopM+TuPTYgLFtcTJnvjlNc1y6C04yIb\nZ8QOMm4Q98Q7gIbm8VuXei2lLftRMSHjNabSwWM5fz/lz/1+M8CrVoAvQn3H\nHbPW\r\n=Bzrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDedu07S2bUOTEAXtIO1ixybRl9pfhwV6pFoxcBZ4PBAiB0vIQ+eddzQR4rNU8ipJNsLoRN2x9Hgv1wemT/psOaIg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.45f9eddc.0_1596070492475_0.722456267132318"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-button","version":"0.18.0-canary.b64663ea.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.b64663ea.0","@material/mwc-ripple":"0.18.0-canary.b64663ea.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Zw3jj/52Q9ANACOmEGvtOi9qK0hM2zd37Anlw+v7W5brWnPRY35azooZs+BMy+T9m7/pAiysd8g3G2mfvzUkMw==","shasum":"52c6d40355e2bc64899027bded4ec0cf2bc3020c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwawCRA9TVsSAnZWagAAJPcP/1EqHZFgxwZfl2G+FLv4\nxnlU23liD9yQpCtB/aefbZNnhMrUC9HJ8yLhIcm4vy29296Zpeb1P070EN4+\npZW10uFNzXIxfg3zEEwiAr81Gx+WtKxFIddb9PT3VLuPLI8wOF3VpZS/eYr8\nlgazK+HjfpXsb9Gr3ijG0p74yaLdzeAlm2ZvdPhd9LtIuUopHg0OBdtdYt0i\nI5Cb9/y6fGtYwN4rL6/5OwUKSJDY++f8+8Qq2faVac6e6EyOw7gfC7Ys0rjr\nvFMJqXgs/j/QLTb2UAX3NC9JrCkR19FHDMGmTffClUJyGGrQfq3cmTLvlDjS\njrz7tdXebnurDVb6X6Q0QQQJUoRsqDkI4DpEK1jc9tWIsUFC6RFyt59UxxbI\nP059ZcR8JGsernjkKqr0tuk/Xa7Nyd8HC7CrNjTH0PnAl2k3X+NdI0e3stVl\n55safXKiStPU/0z9epdil8ZvSC863n3Racynmc5qcXlLQfxw6f9LWpRO7HdZ\n0pW2JLCvB8EAtOwbY0YLlwMqy7NI/WR7xb0Lr67vUtTcASvoLU6h61wUyn54\nATvc7RTu1N5soI4ZsRso2Zl4khMQ9feH7EQxt60o0Jy9xnC+8syBVO8/jowF\nOrFAkAs2ljeGpp5P/PdVUGzi7bOKl/CD2CeP5yZT827JW8XStqJeB677TMYO\n79bS\r\n=cFPl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDP6caPQBDIq2m+qdLajAlvJkelZpMBx3dhEtabUvOzlwIhAP8g4Jx0EvpKJWgXGK45+JmWozFm36mQFRuhbpW7prUl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.b64663ea.0_1596130992180_0.7871619631983555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-button","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.9a1a4d2d.0","@material/mwc-ripple":"0.18.0-canary.9a1a4d2d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.f86f83f54.0","@material/elevation":"=8.0.0-canary.f86f83f54.0","@material/feature-targeting":"=8.0.0-canary.f86f83f54.0","@material/theme":"=8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-41N6JXfwRkX8ZwCgamHmCXnKNAwYv/jTmhzX7CKLKaLo27N8ZtdsYGC+HI6PFO8tlcqNbTzsiPxjkSjZQhuFeg==","shasum":"dfe7efb197842e0912da3ffc2b50835f16005c7a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXLCRA9TVsSAnZWagAAg0kQAI6IwofjXeBwTaebAWdm\n+I9QnVvjBFxP4EWz5Qs0LXFc+hwnBp3uwUtCZZgMWYUkR3oyfzCaB6CjOzcy\n8whw5Bd3hbu+Bpuy3hOHon7Bj5K1jq0wEhE9AiCMAy3CSKI5ortyIgAFtOKg\nrghrpcQh8u9pDGHTRkNTStQcUr9jI3fbWWGYPpkCs+nyEGCBnWcq6kAEU4S9\ntIiL8i2vWa7P1pVwKM4RVUKtCXW4um2PuVKYOuNEHwe+1ZmnyZV1CSAZUeZM\n+ywu07IFEyEJHiDoVQvoVVs9HnjCJtdDxC7JW8R4AHlVIlv/K2LP//tivgDY\ni4zJtbhr1mHXLj06VXJPehO2uXKylvby0XK6SeWe7xEhA3sPMCMwRGdEzRwH\n1tvp8AROuHScClG7YAdrYj1X2q8GlkMSLbwI3DeFcbcFGR1FT7argUV/YGEY\nDH57wJoOZsarTJEd1E51yb96bkciremB29LmOnJVHX/ZLDcWfDENX5AQuQ7Y\nrfTxLLseyoZpMbrABnyJNzL8nA9wx884Y+jS2wAKbaL7tas8oi+6AHxkydNy\n3CgNdn7eS7wZgLc+DblgX9LufsWc9+prG0jhgkOCDZnftnQSh9o14wwZXOjx\nGoytmphUZPUGOLc51YjwhgCKjpp4XO53j0gz4EGeQ5KI6ohHmC0hkPjO2kBy\nYNXB\r\n=eG8S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKj/RIRNE2g2S1XDL8QtrQHi2DnY9vPCQ8ItFkaAHdeQIgDtamA8RFJx4JO269DD7e/5353Gz4BkMtTdF8/7VZ1WE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.9a1a4d2d.0_1596143050831_0.21611638377626075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-button","version":"0.18.0-canary.887c2848.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.887c2848.0","@material/mwc-ripple":"0.18.0-canary.887c2848.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YnyPwEw+QQij1XwLtKF366iT8gPRibqZO63LRtPNDRZ9RBJqF+70c2+sB6UhbjYZhq+4dEAxGCfRXbh4ULcjHQ==","shasum":"48183bab326cd7cc8b1cd84b17975db071e411ad","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0QvCRA9TVsSAnZWagAAAMkP/0rbzbLxNiOHk8JhNHQX\nbGij+2EQePbCo0T0dFG5U+HOA5auLXIhdkfvZiYejB/BvZwPveUMHne7h9uM\nd06AzlQgNDnZtKFSIKjeZuesfYWfqIu9ObLCAvm5F1p6QKBgk99LQo0O+gKo\nTeoVGufe/qL6Pn4qcr/vprGj0bDEahPZpuJmLjZwGAq/pKtwVRaOVidXQd3f\ndQC/iySneBBkmGifpkigRSsn8ggTyq6qcGsGTD+wCoxQXqE6Jk0S9ifJW5Gn\nO+DUWYNDWBSifgF3q2QLFEwx4cbBIHN+iF2JMcP3uIPHYMCPfWvUPAAhm7YN\n/ykIY4TfJtXVmWjO8F7kKMm44COmuSXtAAxJylBPZwM64mX5TBOaCPJXWN78\nbrTY0pzuBKQI1Oxx7U2qjNhv8YJpc8Nv0pzTzQmqf4CECYGo+UEF02fwN9X7\nyetiR+BKtglFwh69qfs83OXpGWXm1+vZGRqM+HycjntDwX21vUF8QPV9BRz4\nrxSkqGlxQvMpfgjwjVxsTbIdAbDUValR0y5Rlhoo2MpG/z3tqx6BZF5PJcTI\nUpsaT8zNSfZNWetPu+jgL7mIz+qSc41W6X3G0V2GPZkXqg3EAGR0hg/AenQE\nunMvvbYc0NL8rzgRrgY8okZUgNYDKp8zxrGgB6FsF95iqR9fhgD1YZY1S+75\n+o/t\r\n=Kr+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEY7qxokuf0AzGd5c2bSbua9jvQc+DicuxGlU3z4a6tUAiEAhHvAmB+4Irrp9U1vR0JLPg5WTDjoLo6jSxJFN6UvyqU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.887c2848.0_1596146735109_0.5982367049753896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-button","version":"0.18.0-canary.354eb695.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.354eb695.0","@material/mwc-ripple":"0.18.0-canary.354eb695.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-PBCJnUmvnqsi/0MZJEakoAThnbXA3WAmZbbLO8N80ufvH25z/OI77LJAnt7rC7ESFYcQrtodat7/aYV/9LJsWw==","shasum":"7f5ed16fd644b452989846d7fe40c8122bc18f08","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16ACRA9TVsSAnZWagAANkYQAIBpnXSN9MokqSEByVki\ne1C0GfQOHJdhZLU9HT5WQmYSrVIuTn5IHGnrfTOtgha05fKuLni+CJ2SSnDr\nrhy0oJbMSXChi9QiZYojtK1q4ORT9kFPX6sIrMMZzCP9lxWYPb/a6HNP4wPr\nXhf8vNkcythpJc0lHZfRkMpQsUFXTdvylDFW/MlPV+xYaoGqJrc2Djk0fF/Q\nX1XQSxiYNKWpxVQ88qk2DEQ48rCik85sDxQSDmMwwpG1zB1VSDitY2ML1oku\n1BCZrkvelcFBRZ4XSVa1ZOds0ntkB5+t/oTszvrdz2H5uBl+5xbO8Pebcf12\nYwMNT/EEJtajwkH9KluPfZ1AC58mmYT1kZ7h/oMpS95PnJ+PZkBioIFfQA2U\nftxV3DqCaE1TKcLescVt2YvxBjiPQizve46TT3g1X98FEOjber6EWO+Zjgpe\n0mzzylkT+ou/tnYvs6Q3DeOqiCMDBBnjykiApka6qJlrI/1abxIfrWp6XPfj\nmqcWgy5Zzb2av4GQhFtdWSVPbdFYtFqa0p0bgyB6Y3MjbshWO4K+SnP2E5os\npzYp6NiYA11RlCGtUh+ruTuFEIbh9RxHzGdzOXRO7/ZXY8BQRxyVa6VuGVhG\n3IXdA6vixbkBepja3BzAuHO4NirUKE7gFnJZHe9+MDpTlo1kRB7quqkAbrVs\nV3ST\r\n=AtwD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrTxSx3N1fp/hcQT3oe+lr74jQWg9WTE7/pT0PaEcu0wIgZjaJUFydKlZS8V7EsXwdVUCwat17C8u8v2wU4Uj06FY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.354eb695.0_1596153472064_0.29643659710884784"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-button","version":"0.18.0-canary.7beb236c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.7beb236c.0","@material/mwc-ripple":"0.18.0-canary.7beb236c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eWQhf2489jwJ4oFKJCzBzHA+eWqANlJW8s6pAC3oYgmSH9TyM1JrklnqxhTQZEc4K6oi7FU/1vJV15tdhHLnoQ==","shasum":"94160802db0ca9b43769479fab2b5edc80a1ceab","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFePCRA9TVsSAnZWagAAFHAP/iSk8px3ZXyUz1N2wjZM\nsUvybWyx2O4ItyIrSYStNTFoJxzRflH7EQjJ3x/fQ1f8tFOyGEQPd2lphReN\n1EgMmcntdP9nzQI3dfYPn70eY9WCEQumNat7vcgLcB5hH6lsi39Q+XGqvtpO\nDXHsjMEyuegBSDhzmEBP0fizQg8J96GHxd7u0rDfSIbD25A+UZS1ywj97J+F\nEEaWqj/GG/5UkhTWG6WL8GleY6Ra2/3r+BN0Gy4wSp2eMD79MP+XWex6d1nH\nMe5x1EN6BywXaaapjoeyshaaye2l35Hvs2a2opl9LnatzDwMo0k0dJ1KwTfm\nCZ8+sfNAk6T3adHlx+jfr4t2ZtB3JlVik9NftkLg5Ey6URGDQKpkflKyytdy\nnqf9AwsJ5pN4/cEt6gEMqeIUthjPKpNOZcTJN6275QUjfbywGOqGX3nVM1sT\noEZ6psuo6HfrTOzLW4C4oMYTvmKkU/pusfwd67aqFxoYoWpQ9vCLuWbI5X2z\nPwaxnMl3mGJONwuV5KDAvvuGwP1NgPGXhIX/pnPkAth9VKfTqxeraWAmKc5/\nx9tB6XjHwOULGNzIJyCaTVO+23m+fyjHCjMBFXzBpjLuWKu4uCtvItzP6+lo\nfxopgh9yvTFYMPmLYObwiFL/FF/bzXhLaQ7wQtSqOYQLlgQNxumKE9pRDaQU\nRXFc\r\n=ZxLj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpuY1Cp763L/yvsLTBkzPobFbicKKJA/wnImyl4q09VAIhAJHPOIxa9PzTkenwaLPPyaJyl5NOGejQHeY5PexvKaDC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.7beb236c.0_1596217231265_0.29194467127595236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-button","version":"0.18.0-canary.c44acc0c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.c44acc0c.0","@material/mwc-ripple":"0.18.0-canary.c44acc0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MTYsY+VT9qZqqfnsVj43H7fUD1ceBweNnEOlFXWKifH+T2RO4rTQPvc9Gz0WBihU+rJ92+iiKn7iRf53w2B8UQ==","shasum":"59a1ed7510a02202a9b08dc562efe037250fbad1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIjsCRA9TVsSAnZWagAAnykP/070dyGgea6RsXwcutSy\nMlnnDsPhMQeZE3gjystjkzViagK10zE37paElyCZUesSc9kxdqi77pdoSiUE\npKtdp8QOUoCOVolWoV7PgHgtFVgekMSaPQF62QuFkZrDCKCR8lgzNiMLbUfa\nURYl/D08FlVZeVxugtY2drw4Q5GM/4MK+K+hJoDxq01UjSHg7tmHt/db+pHC\nIsKayBwyb5bJTWBnF2y9gDCbuG+JPNOtGh1oXK+MJPZduSmWYNb5EZqeHnLX\nHFA7aFaHvCcD1CLxINDtidiBGRuBipdRxMNgqLw+ij4JaqAS3SDre7bIWIU4\nANuD7TlewQCXoZ6cjeKPJF94ni86ahos/VvxeOUg1xp0aMboCpC9hpfe+qVH\nYA5B13l54KTtgVDZbvrUJP5ozlffeWQNigDYMN5nmhs/RIFLw/ErupTfvxOs\n8PVchARYuul++PHti/86/yQ4DPNxUrCwYVjdQHxCKw+18VkkyhLHWNjaZOLo\nwHcN8grJXBQILa9YnWasRSZDz+dmM98D+7zsR/hy3Rp8qK7iw/vjSz0Pd9PJ\nodOsykcV1197PhJP/ZJnRLCb3xc1J9yLk0prFoHipGg/o4i5qsVyWEpUx4N5\nYBXNB54ycDNt3z6vg+EA5RwS8RATorNUto0RFUaZRn7B0bk+WqhvYipkuthB\nbb6f\r\n=TM86\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDh8rM+Gur88kv2P4+iF/R8x2Bgc5nSGp1JCDRvn+7CNAiBixLQh+w7lhKLR0B8Iuf1QiGAvDCW0ZIFvdzO+yvcWGg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.c44acc0c.0_1596229867907_0.8270589440328442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-button","version":"0.18.0-canary.779853ff.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.779853ff.0","@material/mwc-ripple":"0.18.0-canary.779853ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GGbAevQVjHvtOYelTMz6b7Z+x+sTJb9R2GD2p7RA0Yq+6HT5qBF2AF89ytjwmc7HaGWwGuljk64enyc4FpZ6MA==","shasum":"5ab1e6a93f4d1639119ff5353cfd8a7dccfa9d75","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgLCRA9TVsSAnZWagAA6H0P/34CAdzEVTzgo1bNzEcw\nH28E+pjIKhOkQPenqQmy1IlNLDhG5bs9pvxj8k30b1W6WGk14Vb3nGYxB6lC\nlOdrRxjOE/9S1dFndGtd1FFZ5WmB14xvOuAqIy9p5T7YKp6ASLVE8lAXoNyL\nfFKBki4mjjjRfMrjf9R0TJCDRMbse91NN8yoXng/ywlVjQUYWltTOw/SI7h3\nsZ+i4uuaykppvYkVtaaB1ZCWlV8Xgdrl+8qXfj1iLg0xqNN5G1EKKTs3AvHc\nV90nFexBCfI+qsFasArwesBdze+99zTVcwtrUi7+feKG2pI10cOHEaZgu7Ov\n8w7HPtGkHYp1Mhv2FKgapPSEU/xHjuzFBeejVb8SN+4rZPoI+639b3cJg/qE\nxBLEOyEbT0Xu3ripd5f6XRDNwo5kOVIYWSunMaknU+cdSglmsLdMzSEdlzAz\n2LzWXkLKqutca/CH9/zaHTw5fp7VNN7zH79LKVvdywxYNqNJLKVTJmMglv2Z\nvgN9EKEDhnjvlVbrkpr2bczCBkE31s7NJGMpEabz3idZbMZpxCdX+llYVUx5\n0SnuIEiJbWhhL40Jp/zbccRJf27GVsk2PluRoaGcJQhD3lQd5p1wTS97vvt5\nB295ITmhjg0xMI/8Xbs5SFgPV/hcIZFBlBpU8Q/C+ZEi46tJQQSMB3PjA6TT\ntNpU\r\n=mfwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpill/luCbzgF+hvpR9rKKoiAPHgAjFXLYiSIvhtQHAwIgffDVFuogcsqZV2BYVmscHQn4Sc0ecSLLGMfWUf0BH84="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.779853ff.0_1596475402274_0.55895332998445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-button","version":"0.18.0-canary.8aaf270b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.8aaf270b.0","@material/mwc-ripple":"0.18.0-canary.8aaf270b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.74839da7b.0","@material/elevation":"=8.0.0-canary.74839da7b.0","@material/feature-targeting":"=8.0.0-canary.74839da7b.0","@material/theme":"=8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N511bHrl6ork8J0IaIHo0hgn1gzAKc5lc3gwFA7nSUHEJSCV05LOw2Ny0buSyL+mR0zYgyevq10WDHBtOTwfGA==","shasum":"55755fdabcb6247de65e329b7c793e6dffa5e565","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFopCRA9TVsSAnZWagAAYaMP/2lHY5CaggWL63/QnzS4\n91yR+Uq+SM5LUplZwFTtdicW/sObXdHxCSg4Ys+lpDovJqpjdAwYiB3wk2Aq\nkINcAZv+0MufWA+YMY+NSpw2q7QVuZ/VDQ8ymhV7+y9yegSKrFQvtRqSZd3u\nIy41OHn2DnSmxC3cPI4UUOlfeLtdgWuE5vBjhxmyW5/grgOhSZu2qJrLnRo1\nOP587b086TA2Y7YOUrfmNcbG+qBtJFHSxtNr2WLOFFvvCoKOPnTKyTY8ixZG\np9RD1NfWxYk93jIKb3V3lxLe+keyX4dGrRuZwavDHsdGqqfzrn7XNMl7ScEq\neABe/i2vlRB1WTa64pAH94TsDcZuw+8voePUtJ0HJrABq2va8/oSvVC7Ar9e\nGmUSDsZFse+XRQEITYs7dPfYGCFVoM4YsAeyAGBnpNEjP7P7O/Y/4kZKiVef\n7A8scBN4YsocsAO7u1gtqpPR0UamRLQGpM9ggRMzgje0V7M/z1DFQAueQXEE\n3P6cqPIIOe8N+aV3dlBw4Rdjp9IWrzbq0ZcJI/uzbsPoRBFhU9ikab6JDsaJ\nRJm7qmHixyZarp5uI8lR7mK+6mWpmp0yMSrbKjaO+G0VWmp7kJ3Wskt9wd5/\ng3I4zQ/Vi4aaZwU3j3TX2T1MV4GXTGfj8SWZ6YXfLtLdl94LD9FuC0+JWm1d\nHSsX\r\n=+K2/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCx8sqsQs31Ag9FcpQSQqLrPNq6hOWl2vGyjtTFQFWvJwIhAMV+iRcfJsJYRrgpDH9vSnGNDdZlYD9kV1YUvtTIeLf7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.8aaf270b.0_1596480041430_0.21162380704308115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-button","version":"0.18.0-canary.5cde9f12.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.5cde9f12.0","@material/mwc-ripple":"0.18.0-canary.5cde9f12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.5903d39af.0","@material/elevation":"=8.0.0-canary.5903d39af.0","@material/feature-targeting":"=8.0.0-canary.5903d39af.0","@material/theme":"=8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lbgNE5IyWwXfxUH0nD2Mqxx84iyoSJHgoJzl9vMYJpT0fbvGzPPh1LVr9yjTHjr7TOnmDNgDTkMdDYFLp7kkXg==","shasum":"b699450b2606ff72b3c8b6339d840295dd6168d2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF7xCRA9TVsSAnZWagAArZkQAIzbLwjYtbXOW4GyDOmq\ngOs1S7xn9WVLOFHiOmgONUI6yF4X5iZ3Cu+tdugaiHp8QiXV80q19/C6htj+\npX1MWiHbMconLEwfVqhwWRwakr4dBnyENA7OOslwxax13ig3mqEEt9x/Iyry\npNEVvG7trv0sWtAqF+S0ZFTSmx+qB2Ybb9rdqaRMKP1Y4xuZ/NzdRHbg1E7S\nlwHJkMZPFxZK0DDzp47byoBOjSboRbA1W1ZKUyNSHMi7nS5Nk9kjm6+SZhKu\neHKrCEFE1shF3piWurXHZiVHO27LunZYDq9CqOQaUbaH2Yw5GLYQhXMRrmS5\nr6zAVlS4Jq65sr6i0oBXYuwYQb8HeSfjgJZNBUTTYfzpv0zQHRa46loq6wN/\ngQGq97ar/3LAHB+/45ysG8TazSwLEa9ej6ltf8fd8qAu2FvWEeZksh7q3Yda\nMdUOxFMCt7qrlkq0wVso3buXCU8mzHGoWZhfq7ZRAECU2PqhbMcFXzeL1rdb\nsmqADjjZonWQZPIdDhKA83fXmr+aZIJpigAuund0Kvwftn3JdCDH8ncoE7fj\nQLxBVr02VJp2yDWkkU2ZqSCVvDMKwS3iJehQrFQ3M27OkfoccN5xIWpB2LO4\nEEgVXC85XTT1otLu2u0rNb6ZOKBa6suTHA1QfSeCLRnbv0mhcidHVvJtL2nM\nZj0G\r\n=A0bf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEzRHNEiUKJNidKGD0c0ao74oKvPfWW4n9d0nLawNfEqAiEAlA5u3LRgH9/cSLZq7vxmbSWRTJVkx2JpZz5JmMQDsPk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.5cde9f12.0_1596481265346_0.14533965393885095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-button","version":"0.18.0-canary.1607ec53.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.1607ec53.0","@material/mwc-ripple":"0.18.0-canary.1607ec53.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9GjPYQt2tFfMF0C4nl+eGn34lt1xkXwIXnkTqvtRWX/0ncH7CPG1JERvc6pQHMylKthkgK/u7XUs42lm32e69g==","shasum":"b22e0ead84765d5a04df71b7d1b1fc2354f5e327","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGmgCRA9TVsSAnZWagAAGWwQAJL8oeqSmBbDGYkKOoHa\nY3c81kB5VTPhx+dAZlQ8KcgOxSO7KQw9nGHtjbMWbDvronPH1rtpyfSUu7XC\niqonr4U+xq05FcdCKluJ4un8yuVbyV+vToNlBITY4GVmnJ+Xnsh7zmq6JRMN\nFHszxm1B35zeRMvcfIjAXocznuumcoL/uNbOr1EnVHe/lA+o14jB59AsxiEu\nCqM8bpvUDsxJH5MA73ZLMpr5QgCpi9Fm76jVf8SXBxdYFBxl6MS2w/dMXzkR\n8XIIm5lQssuKhPRPYPxycBix3F+Y078kEBuwe7objlBh5KuiReQLrAhRRjDa\nisSAQS9kaKlUJKiYKcr5Cf+uNSyuFxhs+fqJ8+gTuRdHU8RYXuo1KkFyTcjd\nWLS8TyVH9niVNh+kqxZuXavFyu+D0jP53tNN6KAFX6Jq/FZ/8+njxiedP+16\nfLOhpzuIGBjZnzQj9K9apyEBkrZjUSJc6aslgqxj/QiK+bsjeQe9yfzNRQ4g\nFdzUaysxER66wiQYV/eZ24myN4WR45PduK6CEKBCqVlUgMNsGXoez2RSYAsx\n2iRky2gcxpLsEHN3fG1glcOtWv5rFMMpq0dTpubcFJrat0rEkdPhJiMKd9YF\nWeWHDywdwCCBOu1RmRe1ra1Ex7EVXbtwRCL4vhlSp+YsHEhsBgC27bFzPItE\nGfy2\r\n=1g/d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5GcM7DYepxh++wqT1lvwPBxmgq+HOdbiF6yGaUJUCVAIhANYVYMGTM2KxhQBay+8tuD8RM/hQQVXxypSGqmGwbwmO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.1607ec53.0_1596484000446_0.9755065846855051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-button","version":"0.18.0-canary.678b30e3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.678b30e3.0","@material/mwc-ripple":"0.18.0-canary.678b30e3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jto8AOhdWN1qoX/sYEXYw825pGid5bbQ4B33WMfbDnc4T1E34qKmvtPXhNDh/e6lwO3e63huaWyb9D+cMMRhhQ==","shasum":"e5d47011a936f53303a9b093d8927011d8f435c9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqJCRA9TVsSAnZWagAAnOwP/ApumKe2xcboSnRljio2\ntAe4YWtP8ovaptRjuHxo2Snxo19Q1RQiIV0K5VEGagJsB5JoPDBqzUsWthuH\nNCKDZMlO7roI1akKPh0XvS+PiV7n2TvmosyS0ehTOppuhJYII1cJPWNmk84y\n+/PFwoqYwhAor7WvUAeo0/+yQDUBp6UrCN8WjPtyixkjBjuuXs/p3vSaIkYf\nq5BWVNR5iNHL2Rcqa4mBTDrWEhCdWfNZWynlExk/ke7cYa3YQ8vicubLoPD9\nMU6SeNO55+O2+nSXPnCaj6LDPipPCgWCeloOgm3Y9KKEJBsrk6GGRlrTd8kd\nsNGj9IOZivuzXp+/545W3Szt3ioLIy8N4qRF0mL1cYzkxDx2mpnJ/thfyLoY\nxVzd/9FYazOON/KAn8NI+46OPBkNE+jkhPKIvtA09Ne47qVRmAiQAFpzywWd\nEQyPmVwxHbGOM/HMyEKdlcHttariHH0CcnkMQBBCgTNKsIEZ4cG5RcqOa/MH\nahtJ1ZZLknfO9NIxdbJaanvagNXsdN6faUKU/M/Ed7C5b/bj3/eiTJVmZ6Zr\n9KoZ/MyCXnDm5LEPBf/KTm0ytWH8Lz/ENWWIZ0qr77KT/+kihlNVCDSiuK3D\nrLt++vxUEQJCyIN1EP55Skuv24kLW+xuaEp31+7CcIwvvHcHJKmJ3TYjYTa6\nlWXg\r\n=bbX5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuOmv9HlJCMi9/Zmin57ymgbNI5bXU5YuwZRJiatB3aAiAE+bVdu3diAeBZ9lR1GxOGQd6lBZ/qfIs6YDXZK5ZnUA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.678b30e3.0_1596484233112_0.7009688788442423"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-button","version":"0.18.0-canary.21c55569.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.18.0-canary.21c55569.0","@material/mwc-ripple":"0.18.0-canary.21c55569.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AlRl374IIwFzw1euidS3l7dauyLqzKYjWK6ijq6Jw5QHWZD4/4YtBjaNA4V5at2K6m6gp3oqZsgku0u2R5vFfw==","shasum":"c4ab46d759a0f2487fa08e11223396cd15ffd8b5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGvzCRA9TVsSAnZWagAADJMP/iH1Hih1zB8XlSM2+Ylj\nHidvqK70MiRV1hnXd6kEESHZfQLyEkmCzg/PkdoOjUhe+nZ9crpH0OgE78Zk\nER839c3JoXGDdAPm54dmkgmAV7jEBjbcdJVvzYqeEbbQhDFAMQmKWVGaaUct\nUgMzGjMDgXz0UPObhEd/ngIPnsuyKddryLPy0whfOag82hQbP8YwpfBHp3Gd\nyvRFHQKr730MJsTsnrUd1xORNjsE1CA4tqODbW8HFcCg5hfc5RVCrxTkTk68\nlM6/idJsG8hM/kwwNuVv4vGgkEGDKxhzYVzeBR2WkymAzS3SCrDjG5tE+Lje\nm3ogXGzw3pa5zKZ5/hF1a1Youk0OOKgxWYiSj79wY9rGypptQHygWb1UDJ9d\nG61AfkpjbiJdnYBMs4+G/8+gSEZD7Kl6Og2pD2/v3XuJXRF/ImkpNVrZyiJb\n0ZaJGJkPA8t24yw24i7SrKfqIn0kX1OMR5Q66AHgqL7kS2E1UNNz4/hIb8Uo\ndqNqkhdfWF7WRl9Pk1R1aV78iOwxhpfRFBh1edN06jcbbtYGjPEsfppot//B\nRv07HX1V8unTwWHdyWUr91vgKXu8r9xHtIDVIb6YvWB9Y+5DO+ALL0ici3MA\nd7NKwF5KVcOnd6CQ6i74kQpwnB84W7h6uBK2gAJ2Te++HyUN/TOdiREKe6TZ\n6Y5d\r\n=DwFE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXntVDwG5q4Dpu1pYfPB/k/z/1Hj9PlqOpH/E6KI+EgAiBt+GYvTKzV9xEyKVRs3sMsPkDScFM9c9kP3xJtPa4olw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0-canary.21c55569.0_1596484595132_0.6433143708454305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-button","version":"0.19.0-canary.907d4d7d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.907d4d7d.0","@material/mwc-ripple":"0.19.0-canary.907d4d7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-VQeBwXz4wXACz5n3BLPmLZTMAEr9oyqb0gV1DE6A1CzQxKBHUcgNshG3KwwYE1NwP9RPiYAAkX+TISjCVkbtWw==","shasum":"caa61ee039e3a3c4885b30a080efce00ec134d9a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIALCRA9TVsSAnZWagAA1UcP/0c9R3I7vKDpDnNApYd1\n01jzp+2cjC2TF/gb18q9RVeryvy7Q2KVlp2R8cJpPqEo2xd9gW4En/m4jf5G\nGXDoK7wHSeHRaL3/bZxvNSfZBcgpi35PQaZM0Ot7TnCSOMwdyop+mTCJneyO\nbPLnMizWAksltP8gnO8ltazZHuQC01sd0R2Bc1eHRk1/ZWSMjJDX/HZMAosn\nABUgUpGKc6QfIehMSU4YzQ1xXztGlkCpl+THCGASPSalg/4Xm6yqyh4wGNAz\nQgDTI25bTuC0B4u2y7YYbFt1edpcFcCA32FDjWzE1ihT2SRUXvODkntKj09c\n01Af3dDpMsiCMauGT+C32mnyEP1dZXMphko2VnXpFm39PXCSrW46pr9yk8vH\nKbVBVis4w9km63SA/j63VVRXqoizH/JWQ4+bmxH+/GRd1UAWDxUvvEz8cdo0\nw7bYceSi+BkkEZnSY07TQkvoBOM5BUTww84/EhQhdhIxxhLwbPNZrEUhM9Yx\nuh5hVupOXwxsnN3eiD6su8SXfQgAWFkxlWjfpaRfVDNSYYWc4K607IQFeXsS\nyc2n3d/gkMITSlOrJfgI9ubjDBlp7Hy0fW5BVt6uBjOTF0EIyXBJjretFD7g\nrmdsfvoXd6n//sQ+IaNqaTAFsQqSR2PrxU9k2ABiZ3UqvadNTQkJaxq+Ljb5\nqAt3\r\n=3ozN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAUzqJHp9oygDq092wrIaVjS7w2XWlrCXUoDbL2eKJgQAiEA7csnjAb6B+xcGxa1BsFlHffMnfkaCZAc23hu8eVBd6k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.907d4d7d.0_1596489739181_0.7790480399746773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-button","version":"0.18.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.18.0","@material/mwc-ripple":"^0.18.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"907d4d7d7235b3a3256595bce22f0d7db165adab","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-TeUcsnTIiAkG8B3Pz4QNgiudbUBY66Yf9tZVHLGEPeKZENtwTbg/C6fMDdxsvEl/nlCrBTcTFaUNeawMIqhTDw==","shasum":"1b199ecbcc064b9eaf7b6fba4b2b8a7fb13e156a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.18.0.tgz","fileCount":16,"unpackedSize":79589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICGCRA9TVsSAnZWagAATs0P/RtOrnUWTCPCyqtMRrAE\ntVU8YJl0yaeocGB/SMHYhReCejFkzjVFEfKvKy6IwmXNhQj4nm/36C08Rjvq\nudTElCGMKLmYruGbjV3Q4hvKvh5HULNUTxZHDON80myzlcwN2s2RuNNKy3bx\nXGnS+BtReR8Oj9MwpdpDZ1TVIeRtFm5zzgIp++B/9A9vLyi3jNtDxO7bi+0Q\netWccPPtns+8164h2dar8VXPso1JfkP0JqnVco9IBhPaznwd8xRGF+CrqmC4\n4Js6R8/ILVimA3hgb8S/2G8PqiUQSAKkn+82aVkhxDw/oUPNPLmb3NsZJUF2\nm6zRLCHDS0srva7RFqgUuy+qi/J8BZYvZe8zeR6gA8xIkvEwddC7R/Wq8aRR\nDXBlhvAceeWmsP8MYK0A8zKOCVWDKA4PGtHxZKEkWQGgraJkaGw1e3VYaceH\ncHTQHavka/ehOWwcD1R7L5xAKncHfzWx1xEqjKquSAM9Sgp/WCKJ+kdBqjQf\nQQem5BnGlti5mb2UgFIH/RrxP7QEcsN1Vz2Ozlsn050o+X7DOiDSDLNfAyDi\nW2L6uzQ8tO7JcDu1earUnT253OKAm2LU8QUmDHsDByPc8VJr1NyNufc+9CwD\n3AYH6OnE4KfnCWHnA0I9YXBKuulUBLpIKrWe/Cg/u9a9fagAv1SfbSn7fJDu\nwe3j\r\n=agQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaiqpNyc7JNElmDKSeZchuEUWPisigfnDw8BLpaVC18AiEApDfqurYxdXH19LoDcYHl0P77elNKCDeXRKslRy9zCH8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.18.0_1596489862370_0.4022334322395309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-button","version":"0.19.0-canary.f7958e4a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.f7958e4a.0","@material/mwc-ripple":"0.19.0-canary.f7958e4a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.096a7a066.0","@material/elevation":"=8.0.0-canary.096a7a066.0","@material/feature-targeting":"=8.0.0-canary.096a7a066.0","@material/theme":"=8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fJl3qZFcUzevtZUYU07xTEn2wG8dmafruxXoKpFqUjUJVRk1MD+eqENkanXY3xPomemB6PD/uaicf+Tuf/BKPg==","shasum":"141bfbaabf48e937f8e3f4e3e96c92a1458f9b0e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMK8CRA9TVsSAnZWagAAi7UP/Rwg046RALVjmtdUzW5K\nvQDPA4MA72I7cZb4rzlL9B9mdL3c2/8SNfixT55Hk4F+wjICbdAO3TLMLjab\nLW2Mbri2jtVWvZYE31M3ZuiTP4zRw4IIfHZLsg6XHgdjJGxqyiL6yRwTQio9\nW3d6C9PVGoUctO4y11xJqloiPy3p6hlq255KSC95rn7ENEcwcG3DXLpGW2O/\nmHt0foWESNuAPZ8/kPa6F9G9GUS+CqkJG/1Dq/zrGb911cr0oPJ48iJWJm2/\nlFmXAzrID1CB8JQWGpLmlVWskJ0Pf8oBQr0fKVAwKja1LYqtW9QTLEB6xoUz\nmKyEZBXM56Y9TDBuHxMr/x0wLCXkWpwhR4c2HJc8eOCyLjDOxovUel6LqHx1\nRQEirkxzi4QLvZ5H0EnmDr8x1FCcbVvHAU7z2jiaAzHniLlwK+3wNanp+tee\n2bMJE7YWX8bA6ZW9weT61fv0rG7H+6dphP1dm4p2Z4dohqXH1N5eiVS6YdSH\nGl4N5OL0OQBdGPf3JhI18aql/UkupN5sZb8igYi32JFvYr/mxgQTZZaJbGHQ\njZScj4boT499jEBY3+EaGhSQmuwWYMUIJt12LYTBe8dsUeoSkZuXbnwy1V4F\n5CQS8IUV55IBhP89AXawzKyZTdDvLTM3Rdu/kk6VOjJjjuyRsf+9joUGD7BE\nZa0g\r\n=SN24\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7KuHZzH+4l/rPEiw6lV6QFjs6onRR4xBKK+Cc9TtzzwIhAJ2rtP/tGTz8ap57q8LyLjHTJNebyO9rDlpRkFaKzl2L"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.f7958e4a.0_1596506812216_0.8812840419674788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-button","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.f8ceaf79.0","@material/mwc-ripple":"0.19.0-canary.f8ceaf79.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Nb4pMCYETw5hOvXoVB4XMEjgo2TtrRMrO6iu+n9iN+jOIsLRSkYiqh4wPT2EQRWzspKvqqwhKM9BncXN4nra3Q==","shasum":"0c8786c0aa1ecec04c163462db77232ed0140967","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbRtCRA9TVsSAnZWagAAs2gP/iNua4kkfUwkAoi2bhvL\n3AO3yoKPnKVrbN4zlqrqEULuycpanFL7HFmKI583boaBOaSHuETnncP/Vkzi\nHU3bXnDpXNMrSmnaclKCm+K8rOlTiGAheR7ijyzv8prZvJK4wNsLyZ1c8eXX\nR2o5Lkoxv3FtfAkRjR4nBCqMtE4izQkb5NP16n/EX8rVf0/s6hUMAZwMSF4O\nWTuUuIR1REIEGFDxTOaQ4pGZwtW3gwEzFYtfGyrr6suGDzJddqt0frZDvX89\nEVNiUqJUFP2WqjMoclpxwI5uDPY/RnJcVml8c8eLqqnxEu6yzP07PODjZnBi\na4NGsaAaARS0JYYN9q50+ZtnZI11fuI5pou/m8LIvEmwTFemsFD47U+BspDH\nxlqV7LdNbxYJT2eRlc2mQQiXVS5Z3Dd5PvNQS33arjdlaRyRoTAs4MBzESjq\nbkTTvW2cmQI+/RYXYrjr0WXOycJE+KP3rJs/LHIpCJkr5NZKsEGeQ7gOCfXl\nykT2y8whjue5hnsALvS2ExWeYWvuXRezIUe4i+YPlhxKXX/I/BtYum5i77yd\n/rz7OnJSG+WuKyydPtkAEYgyoeY5ji+xKySX6jp0woqiQJMiu4ZqMOAzELXX\nSMnudiSq1uQDRCvgIzzFBkswztvOvv4sKWbc3aaFIe/yAqJTXdnUf/IONVh4\nGLOK\r\n=Rdp/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVVrpD3fEKngz1HCVbVFtEzobvuRMcEfcv03v16HQF9wIga4hkTxBiGXe1ER4L3qAi/bBDljTT+ITZvzR1eJ5Vles="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.f8ceaf79.0_1596568684948_0.6439624517781624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-button","version":"0.19.0-canary.6b9e385a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.6b9e385a.0","@material/mwc-ripple":"0.19.0-canary.6b9e385a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-k/RwaMVHjcBXfFRYWWot4w0xy1eYEvUk6YHRC3HQzKlyH5jazkyX7Hk/jAlhhHQ86LWDHbNijysjI2g6bvm9zQ==","shasum":"c3f2176cc6a678b3cb412a9170a48e8890f55d1d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNJCRA9TVsSAnZWagAAutYP/2IavoPgubZzJoA9ey/z\nME3+WGF05o/zHTonZWrYdS/o+KyA0LiK4jBNjejW75vHCfzk82c4CkXDF7dT\nxf3My11pzcu6mefDuApjifmQhUqqEBH8G6tLL8rLbOpXS9TU/cKeHYxWAKSz\n2J98YkMqaIcTh7vZGWb+WtOcJn8FoiVkby8J60VneeGu5d+Oe+HgvZtOgfOE\nqvfRkmF7kzYjAP59L46xwaqsIkHRlhSlggpv2RrxKbAun+HJ+c10SOmAxu2e\nzYzg7p8xNPJhcBDiUAFizBsHznHtYqv/G3D+RT9YJPxCv3fcuSdaflLMmRwW\nwSMELUS7Gv9TTuGNQg510Ue+VkE0DJ2raEVV9ICOSHsZq7qefXqZyT8MYmNY\n57FTJ5NQBN+HNg2JKRHRPkZaBkMyLpX386erxG8nVW6gcAMHD+WT5aCxlVqH\n19chTPQRgidoSdAbMCdihGQWZTgUZhw/XD1QN9B6Fk4gPFOOwDXYKNsLGMeu\nsGGMLpYHrny/KE+/88/4cxoC+HVKX1wEM8TU+D4e73mlXtKBf1Wc+kY/SQnV\niJNhEAN9hKbKZSESRBF8MjCA4UyKNjo4EpReaurMGMcBxFNx41uxhXY8/g1W\nkLuRxihNFFxJDRIWowG4qUI8aW2CFwFMqKDe6oxoE84W9B9ayNNAnjEqYL+Y\nP57J\r\n=n7Bq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9re7BL3ogIer0nZDrP4lYOHN6gZWThvxLejhmSy6IXwIgVaVkUHJEBSyRHUZTN2T2q0ebNeAq8msoaCuNqg4gRsk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.6b9e385a.0_1596576584625_0.41842170412504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9a7e6d2a.0","@material/mwc-ripple":"0.19.0-canary.9a7e6d2a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tPoqooqRlHfvAk1Zq9yB89fzxzJ578taYKCFGRIaz+uA3iYeKSaVrO3Eg+RmsWd1eoA0QF/gpwnD9dSNuQ0LMw==","shasum":"bd9ff8e44655a3fa6c433d51d996d4026ea5fc3c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKit2CRA9TVsSAnZWagAAxLwP/0tRVAfhiHLHEOtc2OHD\nFWQBbZdACbHS4mjIpJe4e/RF1gNhQQILMGQKCBt+k3rmyO23aliwp0u8rQRX\nxnk41au0DtYLUuYW+6HYbjHiE4uCjF5Bp6jVlgFG1XMJG2p0BwMN9OX4Zq8B\nMiBLPd/tlZvnsp2AhDJqb5kKlZDLq/8tcZ8UqDUbgmhoqF41r0ldT4/4zVIV\nE6yfDJVH7WB3UjEfbwcZ5ypP4e+I8MhDDTE0z/pMxPk8vUq7Vk/LXlgPQJwH\nLNcPAEB9zqstBexhosfpXVtl3S4DC0JginaxgUMIB6Ie1250IuDW7M1Z1fWj\nVIZwbe9udnext7JJqTFdwuTe/W6qdrtApxmqKVAMAwngb9xqx+5uaelI5M27\nCJpgaBGtDkVvqky/z7PrKOVsMReYYUraeYffsTBrz3bS8Uozpt/zkUQTgDyt\nxzuAeRNmIoLMaKsMdyv0p7TYFmo3UZx1T6NqryZ8mRJmhqupmuSlfLI78W29\nNVRAX+fjST/RB8BWF3qvFYJQYDYJVUmOqncyfH14RvxOpAWpz/5AZK3YGeuT\nP9wBb509xEd04Mpf1VaMWdp0g11w3xhhPL73jNdj64IK9Q9V/p7mfyYl+NaM\naWHer3+yIpWcEGZ6TJK0W7qhc8ZOhU+32JOqnarMpTZiZMPI8XI6Zwe00K/4\nAWJ6\r\n=lfBK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhGzlgyKFpmLtLJUQBKp5rSedeYGEFgNpHWRNYwOiVTAiEAtskZF4f9niZPbU5q3+X32pa5c7fpFjrd8YMSwdJ3tzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9a7e6d2a.0_1596599157613_0.05264828974104874"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-button","version":"0.19.0-canary.188f3f1c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.188f3f1c.0","@material/mwc-ripple":"0.19.0-canary.188f3f1c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-try/BQx876oHNm+Tzocf8nKVH4fL/9FvkuB57jZ5+5dQc6D2kP7EsLIx2FYkpPrVCxsycPyEk0khJaugRzx35Q==","shasum":"a1959fac1cda28e8a9502c53e09a782f26fee63d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbGCRA9TVsSAnZWagAAGA4P/jv542K7UJnJz05jayfx\nLJDpyVyTyIMPn2ng7Qzs+/VzYKiPUzy8rtNn7vu6LNYFi1CP/mrIKtxmoWVk\nHJatZcvdT2mYfyIGH4tO01DN2wAHpeUcE8gkWQbzyrBbyX3f6r8W32sSWM3Z\n4VQphevCUcdC/BWfos+ToZ/A/FaQ/WBILO4LDrgfQTxA6RvOUVteDGCKerVC\nDaSmp/HlRwxaoW6MT2zl3ZsKDm26kLLzB5/5Iv/eySPVgOKcx19oHmZ/lCrf\nqPBs65FxJtPbxgnXFZQn9/2YM6LuUiN1RXplIHw/UWFyiWjXC/mlJ12ZScWu\nTtq/0F/Ks8+z5GM2s2izIVXAI6jDxsY1fwKeRNCwUf+7S1guFSu4SuCb7vac\nuwivnW04kITTZ4Xh9p4fKA6HFuqcdP3W60S9WZXpVne1nG4TG/FGyaXx8vqm\nKLWKkJTHwLxyEEth+lkZ6zN7WdusPKZg2DwxoOW23aZCdQw8p0gHqKUb9pvw\nZoFHwh+I52Pz1LwzQMTcXuBc/qP54lOzU9Imrn40gwReh+SzF5LDBqn4vE8Z\nMO03qoiPHDwCGopGFVi1uiUJzeqgQi78M9Es0vGGJ84SdATdbO31xfBLxvEK\nD1kifdJpnJYxv2ApJU8cjqfP48nTM0LprqWLuK/nP0+28wnHMZNcPTeueGgZ\nQ+iv\r\n=EiWl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD5VbtoREIzk5qbbnYaLWuoVmfR07uSHyzcLEkp/6h0AiBtiUjmwgLYKHBwHF0R2gGZQYnZfytMHKvE+OeSf/3oPA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.188f3f1c.0_1596651205782_0.8791520362806671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-button","version":"0.19.0-canary.b6106add.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.b6106add.0","@material/mwc-ripple":"0.19.0-canary.b6106add.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AVSxK9zoTE8/P0WhA9WXTLal64aYoCJuywD8QnCKh44PGqjnqfDsI1hchq5WSUAIvyG9/cTJ8/QjvFtpLAAAnw==","shasum":"13bc2933be120d927ebdc425acd9ba35f1f7ee51","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtRCRA9TVsSAnZWagAAsGIP/Apyj4iUnRJ+tL9Bb63T\nfLeHJTYL9249/s16e6gtjlykuhBB0CNaOFDL5kBaxYstONFzSOxjyQGNcjjz\nqgzdU0k0O72+CxrF74Wv6dk6P9i4cUfHvd3ZQEKTsf8gcEUAdXGVjdagyfnu\nXuzC6ry3X1CLz5aLiDWCYwfYHtom83LJkzVT8OZ1ldN3wrllS4+yzawhhfAO\nTq8NOSS7JkZ6w3vqHoCn6tKcMoqQd21q6MxquF2t3ixl+i5J3KzjQrtN4FGl\n0MCbPmuno05GboT7qWlfPmsYBP5A5gIuczoU6WBKHOMmetnzxLtl2jBYuKb2\n24PRi2ACcPDKpRO2tPHfkmuujfsDLXmJYEZMGpPIo2lchyaKxJqmVwxYeVfy\n2j64rfz+C1ZxErwvwOae3KS3NSrGpaqcyKvZqJ3dZ1sviKN1jbyov5iyt6wv\n2YEnnn3RClm20RfpOpWOaHgNkSEDc6TbsMEgn6zUJVZM+2PDXIFKBz/SiyCs\nL34ZRqBUQ2FY9I7ANH7YLyOUVcpIz3f9Q5f6gOd86rPy4Ez/T7bJivta1owi\neQ1F+zP9FODNKvI2VA+c++cgnv7O2/sqe0n1y1Ekp+ZIlnxtMKV268SX8VB2\npYBTYKZ+DWLVedVv32rIIGD4mSowBcubXie8vl/pgN0Q2S/mVaQxU3bDZONS\nh3f9\r\n=rmz2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmDkMzBthNqekc54InzAauc5P3B93+vUXLzMbgE0a/2gIhAN0Syw1+Hzs2L8wjJOeNaYZtJLJe0upPVgviGJOxs4GM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.b6106add.0_1596660561153_0.7037857701337833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-button","version":"0.19.0-canary.ebb4c667.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.ebb4c667.0","@material/mwc-ripple":"0.19.0-canary.ebb4c667.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GvKNCaHY7/xMsbiuih5k051FhYPDcxe9WUUk7/rJ7c4RjmgPIapXI8HSnFL1Rk9am2r5g1whG/IrOLpHmEJPzg==","shasum":"1523db4290592c781ed034cf02caa40894fbd0d9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0xmCRA9TVsSAnZWagAAEvAQAI5VreY2JVHVbzE0WA1g\nK5xcGtRp0BHoPw5OEYSbFlfkI4sZ9JgIDVgsK4XPWpAwaqv+RbUvSbWW/eTX\nj37xg4kTToOYI8mD6PJspLAIemvgUuBMGxmowfFVQQRP49OTiJ3TEKWtk/Rs\ndhKLCIBy9VjkYolwht1kTNY4EtSXA2kp5dH0CNw1bTHLXnvW8lJQ5zEvb3C0\nH5nlQ2B47AIcVBslMkgW138Isyg8hXEdVaikctCFqS/hV2xaDSJ7LoCsEisQ\nJ4mrp+oYr27vw8szkvQ5Fmx1LpzEtCmYlRTdbiQvsPJhURp8XttkZ5eD59Kc\niyFQ7syv7wihhxUaEI55aoh1ki961OLG/D4mSHThOksApPgvptlTRsHE/2BX\nRa3fRUkEjH+Zay6piQ/ShYzI0GFmVWM9sOROnLjn2emU1kMQZawX5YQmiOHU\nHX/5YK6HsX4SoW1tPVItPUhMetR5kXfYJ1gYdb+mgnvAPRF9I0ukJQzSjqIS\nVmM6e2Ig6NxqxRTKo06qJ0rtWf+HPR1LLgazNBDUj+pt73+CtfvvuUzfuheb\nYsp9ZR6plxKTXvta13AYkfoKf9yZGOuiz+w6w9TISIK+gYROWlhO3BEpo1Ac\n6ZAnbjfybf1aYNa1sTGYrHVMf477CXFMvo9uuf3LRj2z/gi4m1VurrYyNg7F\nLufl\r\n=dCmj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQqD+/QTuHZ6NvH9wYvdVP5ykpOs+NNafNmXtdPyUQyAiEAov0++XDjEViol0KSDKkwTvnSUeATz/MIrjYA/t4MF4A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.ebb4c667.0_1596673125849_0.6888053138242392"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-button","version":"0.19.0-canary.aa44289e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.aa44289e.0","@material/mwc-ripple":"0.19.0-canary.aa44289e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.1b44b43c8.0","@material/elevation":"=8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"=8.0.0-canary.1b44b43c8.0","@material/theme":"=8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2Go2x5FGxqKmtPeObOzgxlCOexjDzYNqAyTV90R1DyV9rD7Q6lZzBFX1HQp8N4RwEycCZvo7BnGRDxDTWALyWw==","shasum":"da1de51e839dc9f01acb3a29f1de705c1e4ddd5d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":79641,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuMCRA9TVsSAnZWagAAJPEP/jK71O2nOopH5Yk4n9JP\nHIWwxiReIqaVP1HMHMO9oybJHUtlHdIB7e0f9CGBVEPaTZlw8fdTm0QWCyIl\nh/theq6tMiGy7YEKyfM0lmWq31ccbTuMP1skteEjujbKwnuQYVUOcpRNA3mK\n7s5ErE1iuPn0DxZQpYMU+dZhzsmdVWyRouGFfVHVaHXvjMbFMOX+pUSDyKrW\n+q5SYZcP+vg4pJUowA9UffSQt5Gl9wid2JWVjGt2D4+djwrm7+1APYAR2hmg\nMY/jeX/poygvmhTfB8aarBpByUTfr0X34sj/FmYAfQTvoY1c8xKyZMT+w6JL\nuXHkbwKGi/pBMHQMCTII3ZScFY8uxOAjevPp/X0k6xRASmXqONeqsh//Lx96\nRVGBmXnilSGb+8i5dNCi6yKilXsc64rrgV5W46rcRNb7eihqjC/PXBL6jPvR\nN5spG9JOhGBXj18Hv9b15fwYg2Q3xdV8AzWkOeJ8+vFCuWVOFJ5kBeWYOXvI\nllgC2XoQCdzwSYufClRZWUqnAfELg+Kuic5hZq8O9bKf0bA2zibScbUTJdQr\npRM4/j2p4NrHpIB7xQw4XkFop826MDosXPwDDVNtqMYe+VeRgWylhcu7u1bw\nmM5qR6IRSf7XiTdqBh7R+tNYTvp/02vivbmB4vGEBg1gi3ul2SuqdaBw3+cI\nsJOo\r\n=HMuh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiGIYXJT5xCD1HsHEyVU/5KmgjcbZdqWKX8t5r9lR5KQIgLZzV8DkBSVCiJNRGPlGswgfI9iAkLIMTIUjv3UUzbkA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.aa44289e.0_1596738444510_0.7559017709114266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-button","version":"0.19.0-canary.e6b0816b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.e6b0816b.0","@material/mwc-ripple":"0.19.0-canary.e6b0816b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nIZ3prtGjpu+nhvys3n7rZkYuYdvybzZUxi+VaQU+8nJj25omMohpgFc+DC9XS1q60Oit8Ex8hCxqpwq2Fe4ew==","shasum":"206a1a394dd5850b703742e6caae03514aed5b04","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaDhCRA9TVsSAnZWagAAKskP/jgxovIq9jnI8bmYy4kV\nb2lXlq7xD7yF1SUYehPmj8itiYnVAvvU81X2I9VVgwyabB26zsWyAkXEe0Xk\nRk6vXT5nKufaaX3MYte3B3HilpRZaefWdY+G0xP0R8Kl6ZBlNnDaWktlQose\n2zf1IBMyrTL2B991xwGNFQMfSs4+C/jfl+UJrZ1aBwFveH7ZgvsPV7yJ/+OR\nA12QLo3XIiZU/DhvUm06Ne8Q+a5csOpFLRF0eXa0wdPYS6jbGrHZg2feRtUm\nlPN/Tgux+AYLT69X54QLYu7S8hPeuAJyVSoh7nOGRoOT01l+pXUvJQ2dzgz7\nuRzvXZffFFgga/f2sINH4xuJVAA47ePe2beX2EI0M4e83wxmRyf8kPuaYdNL\nT1L34SGvVCU1rzfQUPZ/qPAS1mkiee3xZwTNXhpmzdFTExtPjaQ08r8WLsPJ\n003gAc5IIEKs/XAxPWXP3OMy18ssvSY1C3NKnqDdYyxvsHR3gwKTIj+u9nhi\nFziqfp87qmmMPn+02cE+0+IyjR4dpl/vmUxeisc7jXV7oMJYi+THJbGfOXrd\nK/o8wV7F21pXo+IHjB3+L03gaBcWtNGFXg3SR9N68VxpaSHnI6TE3fDRpzSk\nLKdRu9WdOK+Ylq8fPAM2bThRpUtC/BsSlN0UjxPK0/Cmyil9P5JNi2agWDoW\negfo\r\n=pkMM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7cGVVFe69vtfagl3CMonQOXWh6wQsWhPuETKhtSUujwIhAJ8FX07jTkblP9c1a8KFQXEWVXV8E8PukWPeZvwcA+tc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.e6b0816b.0_1596825824865_0.6756108131693028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-button","version":"0.19.0-canary.96d15938.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.96d15938.0","@material/mwc-ripple":"0.19.0-canary.96d15938.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-91mrtFh5n6M+KxfRTv4KB0V3OZMlxpUAYvmFTY/cfAhB0SXeq42PoRHNlavHEbNcXdVc3hNiGLiDEXcHrUc91w==","shasum":"c4ff9ebb7ab93057fb5ebdafbd9f45e87e346cad","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmECRA9TVsSAnZWagAAFS0P/2wjCFg9gLJX5ACPzYuR\nvN5ZikZ+PN10ssR/1Ci89MLTpAnMHhwNcl39uy5olYkSDba4WZAcGmdLYaao\nY5X7qEtOzffR9CT41of32Wkf+iA7HVDc5F7xFLKOyOWbP9BNBfLvyBxEzEOj\naWnBBgCGMM9/yFXs3nPUEArPCF+FAn3kZEiJ11OEL2/e3aifFzegnlATAvOF\n75AqP5mnzH8hZaAw19FVrAU3Vnnvq0VREh+zWinP3xnO5V85Ruf8epT/F3VJ\nZG173OMBZxTCidKercCr3+M/wvMj51R9hzDpVTK0tGR3MMvuNDsGqSB3CqvQ\nU6996W56uHlnNpb/NJN37AYFZQpNKArbx2poyPVT+GDNhK5b96ggtmTWeoFZ\nXZLMwKnG27Q+SYWvDc4T4nB0EzaC/3Yh8zznAG0RvBZoXLTrJl6UpgucxA3W\nGaIuZa4BWIZLzatUPueiYqyntXj3Y+LpYvOwUA5mBv0JRf0G+FUxmMQ86xnP\n69P5Vxhkvgt6J4s0SguKB/VQeR9lBsW1OlyfwRzTCz+Al4GZjYAWkczfV63Y\nUPVocy1mYu1TjWU7IAG47VYQzxLvli9tLYRdgX0rEyrtkOmAOOld49BaPTWu\nMUGtpS6onIxCnMljv3aWUl0rn/ITydUpeyPq3bIOPXDLUWQv3G2xhqMN8faw\ncQek\r\n=3agP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQEFFn0F/p5LmScghOk02InbcEybvtLkgnBTVrXEitogIhAKxO6iuCxOWCA03Ie6X1aqXeV+nnnHq4hAasq8t+MCpm"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.96d15938.0_1596832132015_0.5534318199197497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9d991c8c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9d991c8c.0","@material/mwc-ripple":"0.19.0-canary.9d991c8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ltY9x6BGCJC6UF18bEK+Ic2HwBDxby8m1L7bevEpzjcysDu8tyyXG1b8ZVrB+g9ygnToNHEy3olhTT0syHfGUg==","shasum":"111453229ccba2c7c0d8e9f906ca2d1bc61640ed","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDaCRA9TVsSAnZWagAASAIP/2r2oKZAvftAQFMZ9z3Y\nLv+ijP8vGxyyQWUJEOw9ciJmoHtLUG41qQabA/XGR11hxolg5oxaUF1o7zUX\nyoJmEDorFzUOCHmB0shukvKH7vqKQEN1sqChzJg5ujbXsJTo5i3TfF9ozLsq\noyvgFAXnQ6NiZJ5aj+/+TKQ1sFSUCf9uTKgypihaIzpaiqDelLHLqMi/Mz0m\nVGWdRRw4IVD4HS6QM0zVCLDtO3pUiWAu/4lRc0NsqeKft0GHxLjO7E5jgKoT\n1BufwKBOWTmlAi6P4uiioWvzb3LrzbHYyxArhYsqfnDhZDU+rcaJbtmgZRIm\n8yDZS+5GUgyvkU5xm5HLXa0s/L/PRrzFlQotC5vTtcAhKdrGu9hQhf50gQ13\nskjK0ypmQZ5UNu05nqZNEdoUkPkdNnX4MARdZz6UPTnDindfhluqMnEhJGjg\nJ9g6oBFmUBRQg0Yf/tugqnRXqfiRbovlSp8aZA5Lf6k1RzCMMUMqVoZTIfk4\nV2C6Z8q2c561CL7x5+e1BXGuQD4cGjcZwpintd+sSgNvx6FU6/Y0sn5OGOBM\nN1m0vVRDqTsEUZjKSVIgWpfKRVQfpQQCPv6VX4Mv3cSN5iR5pirkExNWN9T6\niRpOc2i1rst0cxpa005Y+Gc6tJNFbFPGIQS3oFRdZVOSMSysKGz+TG1Uys6v\nLokl\r\n=96v7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBd/azsAalJMVhXtP65GpZ0WKAyefK7Wc4k8vRIvuXV7AiAFTp8YY7P9IewXCoNTxB7dk5nuxjvAxOh+EtEHi9yf9Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9d991c8c.0_1596838105849_0.37024035446403847"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-button","version":"0.19.0-canary.13bfbd72.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.13bfbd72.0","@material/mwc-ripple":"0.19.0-canary.13bfbd72.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MEMeDhC4JUzi5F7JNvkNNuaOHv/clKZZEcp9pW1ECnn2CoFuJpQ4RFP+aGAr2Y6aoOJcHr5dhJkqI/WOceNOaQ==","shasum":"174a1bbc7a03349c4aa955eb42ebc6e266cff895","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+dCRA9TVsSAnZWagAA2x4QAIv7chPfUsHgi9jccJSd\n3LstICvNF3Hl4Ri4UApbLWZkrvjypxJO1eRL4xX52suzvph0zEp4Ds45Xn7H\nopOV0ldDb5fI+BNaVX9RVh2/QdPL6BggvZXfEMQeleUC8h0DJ9IBrQMpJKZS\nedGd0yKLoQf23yDIveuEyKGeN0IsTjc9LMR3Hqt7kAAt3oyxSOvi45arpuYp\nJYdJ8wR3PSY4FcWsruxuMc+1iGMHwZS146D9iNUC95StYzEwDHC0SUJdr9Cc\nix6NU8tkAkDyhwO575unkFW5IPdbcmoAXi+V++e/rcFFpy3iGVqpK7rBSPZh\nsFBBuOqvacSQzF1qrgfbAq893xL3TdC0XlBgIrDNbIN1ANAkjV0GiY6sRNog\n2cTQmHENc6OReYobpl5Zit348hcnHIdTuhZjcPRj1KOdQoend4gSD/HsGKUT\nxpwZoK9ORXyi2A+bWwbESaczmXE9XVCFleLGoLbnKdoocVAYIpVITeKAcatf\nOJfJ85Aao+N2jSmQnF6N70t91kWVVpNaqdsCIyrJgA33ldpczS7GJAiSqcWc\nglskQMhRtDraCIh2PDqmPGnXQb0Lkhm3wxdlxidaFRhSy+X6suwKTrBil3dY\nK8qhOVv63uf86SomPj3DL1EVnP/hrZ2HmcOCqXvz+e2Q7Okk5Jiw1uIDrIUM\nkQWT\r\n=H6N/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTK/5+iJXChD8KtpNPgOBK6yYfVVrPAO5GOOEDRZah4AiBEkv1gbs2d/TJL2V9f7qklc/8CvODH06jcGHjqae1jFg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.13bfbd72.0_1597087645480_0.9561830105311817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-button","version":"0.19.0-canary.30b1b258.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.30b1b258.0","@material/mwc-ripple":"0.19.0-canary.30b1b258.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.96a640534.0","@material/elevation":"=8.0.0-canary.96a640534.0","@material/feature-targeting":"=8.0.0-canary.96a640534.0","@material/theme":"=8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sFYYuDn8W9AOcYj4gB+LIANU55dHj3kUhFAZ94dSZWhkBlk8honfKdV/JDcVrvoeGihKcSxyXFxd7Vo7wJPjvQ==","shasum":"beeb3b588c63796ca073c55a21f5a1b5cc9233fb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMajkCRA9TVsSAnZWagAAB90P/1lpNVtSJrtgM8lJvch3\nyITcRZW3oKZyuBdb8W0lwnebRf5pCoYP0MXMtDT+W2DD6xc214vBps0UFHdP\nRW+wpQ3R47OE//hWcPncr6nXaWfg7/7BeGoA9knowxvClQ/dXsGgDcG9dVwC\neUVqPQ4Kp6XYCon/C4M2jNM0bmzSOEC/5PRmI8pH2CZS/hlZrq5B35J1EZpm\nXwMjdnUrno0javD00eK2V+x/jyTr9x6AjBMjcqVwNYSdSOAbd2mAOykUk81d\nkFZ7u/qKlolsSQvAutW+b8B6kjmraWEl2uFpoqPN1GekREgbLhTaJhoAeWtV\nFUUzGap6+rwQHfZIJhOTvMQHE1Pjc3ORytO/Dk2YLsCje8ixXxH4uZTqWn7D\nTMsrouwFn1mLw1OxlINqvs4I/LmFinpZ7oczI9Sca1p6YHhXLibGnGzsH1F7\nqBeQAR8BJh2GZtJ4RDpfVqaCeo2L3LeSlVHO3Jif5ShnPHBDyi5jd/SqkmRt\nNvobmyBvqyFAGbg7XVotz8hVdHmKwH0N2nnbCgsDatYmkyeJUtxct7tLzX7V\nYQr15p9iIgllB3YfAfKyqoF1mx75wUGngmrENvNEfBTKm+w9/lbin8dKNldN\n4Uzp0pEZF5A1YJrSdph0y207R22bnLN0HyxR7QN+vjo3gg83yhlL2TtkU0Vm\nSyoU\r\n=vcCu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTjkzJvAJtsXYsy4Y0+vA5fw5jEvJ607s2JwfzokvkNAiEAnYFq1pAfjQG6tZit/Hjh/FTod+jW20mU2EOEoDwF8WI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.30b1b258.0_1597090019546_0.6586191722230064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-button","version":"0.19.0-canary.1583e263.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.1583e263.0","@material/mwc-ripple":"0.19.0-canary.1583e263.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-k7BexRqNAYHZYxat4pgWhTMoazRqLDjXYeAcpqKKGj6opTiL5/s1n/p92H2Q3mvietlOusNbrzn1iF6uES56Fw==","shasum":"6ce3fc7a43ebd5a0436615370d50ef2ede413ee0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyVyCRA9TVsSAnZWagAA/bkQAIQusxioPGah5OjFGEXP\nm4z4y8X2sNCP8USXVcQ+r7MgZ6gluIUsSwYLalAQnlRY28+rj6MuoWF/RdVa\njkdCHgGOS8ebvtcfyopvqYUVhf7KLCONMpKaCQMB13oCWzZem8fcTFEmymcq\nnx0FWfxxtfCedJz53cn6DDIr4pLPy9bXWcq/dIN4GVpmt5jw1Nf2a9s3T9qt\n79figryvpuSaXYq3Arx1SkY59WPRCFWqVfLJV4cVq0+qFFbU2VTjKhXjFF4N\n7jk3gyLbxHjT8QcwDn8xMHVETpt/ZNjUY3whsbYrdgU3BikDR7LC9mjHFKvt\nhdzyvbkbjnW3poscVed4zvIfUX/2HdUU8bOMrVOvSpey8FMgl1yDwOBmK6Zu\nzRgB9mnz5ygOy4QYScmdah+ueRDsGvwRNuwWV/9QTr0tTrzZ/Kl9Gwj2uoYK\nxbDLW2osHx/OO2TSp+rDiKVEFh1mb694PC+qJ+HHmlQPXZ0jHs+XaZWaSScj\n8zxqQc6hLZQ+MvL/aPG9yTZouQgnV72CR+cHiLWzRUhMoJYwGhc4sWifekSM\now5ASJTVltGbpzfAC7aa+SUgnpOXPRc/9RWVgrhAqw6X4saok9sd2on6el0s\nV0xeRpMqeiNKfABO0VV6JjkJegRgMlosJ5PaAbvPi4R+gwP4bRBN+XOAGz1j\nfyOg\r\n=MXfp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTAAigOlxeBpCG3fBOppJVedID1H9zk3+p8vvByjxlYQIhAIYfIqO48ZYNOf26vtaaQG+hgBxGxqA4e1Cvk90Ld9sP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.1583e263.0_1597187441654_0.3241165731747091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-button","version":"0.19.0-canary.fefb1a93.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.fefb1a93.0","@material/mwc-ripple":"0.19.0-canary.fefb1a93.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-+zOXuSXhQ/42bsw25VRN+6UWZiizO3NE5SfUTMI2Wc7FeQj5UrgKlD0EzQn7RLIkg1uDF9H9nXRmLkXqnnZctA==","shasum":"605fd4a81153318f2156364f0572903c3c6dedd7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzbjCRA9TVsSAnZWagAAbZ0P/14F2Yp5CuGmEW2E9O3z\ne59z46Eq32R7REkw396p29M/+V8piPamxy+3KQmO6mbuQAFYe5riQo9ih8LG\nTbWPrT5N4DzghOQ2LT0vC3L6zHJRPlbFlNz4NRQyQ863TeD4zSEHdyv/Fy2u\nHxZD7p4JWA4M/rcamaXiHy2kB6my3cr3yB3vtB6pdycoEqODxRJcwnlg18Tk\nvSzFgwLzD1QbkqhA9CZI48NrcsFCAD8krOoqetAdXqHxz8sBN6vLpcQY/szr\nPcwF1JSaKGinkdmUkxzFRStmVnf87oPMwNoikslKiQwEShAR3QLYGUx7QmCc\n2MN7rYjC/VLtkDd7i48S2VueXZfmqUeGRP8Z8Z8T6ljnJ7yCnT+TZViHv0rf\nunl6uJ2J21zJ6/h049zyYYJcL9BPzk07WPTmct92tvOWNzlqsrZjC/HlbG3n\naos62EPDkRzkV9SOVHN3OPU+KQ4gvMBdmsc6p0x8P0eLUBrN03Z4QfSAl2fb\ncs2xos2flVPVXk0XsUYxKxVlfaX2m1HE21F9fTObIl7PZkhDhGjwzpnAZIhi\nZXiTsPySUXfxhI9IH68TzUT58uhnuM9Ai1JdlUwnIw7QzmyritHmsY5MoPBP\nrDtdFrf+g6azmQrQmRMI3OwoIwtblttO6fADNFuAbT90IjFGfJjou7cHO3Su\nulMb\r\n=alp5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiwbYn6eNJmTsE0UTRGks6RO8IZQ9UxBNuew+O7Gak1AiEA5848dwXaNLnpAQX78Zkyb2gjprnlI0sgrrF/efA01xY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.fefb1a93.0_1597191907275_0.5932632610203517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-button","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.1ac5b9d4.0","@material/mwc-ripple":"0.19.0-canary.1ac5b9d4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Q4ZAUU2uNWjz0qM/2/uSEwpOXtU1rPsZlCH01UVRm3/tOV2DXs4p2EynVBD/BSNYo7c1FdqOECdHd3VTpLvL5A==","shasum":"e2d43f43a3fb392ac43c820d5cde477d001cec95","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSPCRA9TVsSAnZWagAAu1wQAIO867GNj1gFMC+2Vx1+\nyqqieI4h5HpFPG/WIoEsmNjM+T4OhSuzfEYjYHfjUN940GaaQgnLJDvuJnir\ni0RbHxDYcwcVY1jFWPHoZbMIbP2fSNabc5n8Vl/xkmWVFCV9I0P7hFpTfaKH\nOuBeAFGRmzdSfOy4NBSoj1yFrETcEJOh51Ezl9kmDOTug2ZOGSXfVDCej07W\nHfJlSLKlvKjanqm8lUjm+DuvVkVqXErxcWjzOvhL/rQ9bDaMtDAvZNVQQr7q\n4Mdi6VFh8L1yopGWySXCOZnF/iGRR6CXKiPJYxES6FJx7Uu9+OrhFfo/K7ii\n51wrQFRUcXw05qyyuGvt7KAmdGCVZzr+4+huRVVsAEKY/yAjOAOAgu6eYMLS\nMVcNvk14UfiwSb0Wo4AV4ZfN2cKJlACRk58kInRkF/TINmfHFSPqFt69pzzl\nU154Cez61s4tVUt1kag0AplbSSgBVvD2nIRLo/pLBbN9hDEfWkeHyjt1Eo+0\nxi99tP4MIv5XjhsavG1WvFDJt4SqT2C/FKzFVJ8i2doqIleN9IDd7OgquGbP\nY14hNMKMhjxrcpm6VvF1YqkM4S5HMOROnp7Jlfj3VwPr1/UPV49TmcOTNv/R\nUHiZGZOqsATUDW2OUUyipxoYC7T7J9TK1nhdFIiEPoun3J99mv5dqkyy4Lcx\ndBpc\r\n=+iBl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN954ps1rdyqf+gsHVZkN0GUU/nqNXtIUHqmgiUk4MFgIgLlPXar/PfYfPCCGlNjNC5UbbmDocHFwxylwXAgxueTo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.1ac5b9d4.0_1597256847134_0.017363939909832204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-button","version":"0.19.0-canary.f17f5052.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.f17f5052.0","@material/mwc-ripple":"0.19.0-canary.f17f5052.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.85a5272df.0","@material/elevation":"=8.0.0-canary.85a5272df.0","@material/feature-targeting":"=8.0.0-canary.85a5272df.0","@material/theme":"=8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iP0n3cMOEBNtFZ2CA2ZJuBFeZ5sbPWv1oO7lKFQ9ZC4UDaTx++q6srYne/1oxC8cOu25H9gHFjHL1IiM9RbMlQ==","shasum":"f891ac072b85cb30337a5f51455654f0fb1650e2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXT4CRA9TVsSAnZWagAAZZgP/RiLdjli3NNhBotwJ0cn\nGPeMgpx/fXk3Pb2PfCA0+38OrOxnD8FipR6ViHRP9VvFQLyXuiPPTcC59FBG\npx9NGud90Qftkhbm41nM8lMvViA+0eWU8sb9IwYhnLklzlDHJj/doHsU/1EV\nfjMYJu9IZXmyoJrrPlLatSUnckD2jdvV2beHPX6dVPgesXbvLL3t/lo0idU1\nyrtuzU7r9NMfx2KSnWddYv4q1Sn9ZmYiNiCABYPqgfH0AOO8SIoZRFnpRgRM\nziOLTOOVdagXT81uBnu1c4tM4eIMpwBT4ViknjKqaYNKX5H8XkSHiLBPkZVB\noOIApvGoRZEHAnUefvkCBcjXVCSGVfs0RP8032kLQdf8UIAKVEa3uq+i4Et4\nbICRebfLrYZGGd21RX/yWnenkfMjPA+kXqLWEo7hLzhD38yB1+f83T4z5A3l\nU/syHaP91sc9d93HBA9rTc2EniU6q7Cb1qQ6J0fUD1V+ULZfoQmM+FTeWAEs\nhdztix+gAFaaaMPeTSChZkZJM6m2SN3eYWcHTAJ51qQouUkJa3/vV873lAC6\nMPF0an8QrudY4UrcFqdxknecDxoeGx7h7WyWA10wB6jzcYt7NHm5hRFwwnB6\ncnKkrpZGfidBQ+w5xIZR3+2zNy/3sizUhrgm/S8WdZMJ9UwuCLA8ZcRh54Zp\nRsl3\r\n=cypu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwcxhl2ABtMhR1ECwsd2YyJZNkv1VvMso6dBowXf1MxQIgDOrzK0kGObu0Xe1CLoVTr6INNuzRBZ9+xQ9L5khIW/s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.f17f5052.0_1597338872058_0.43241585854094455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-button","version":"0.19.0-canary.80b5d20d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.80b5d20d.0","@material/mwc-ripple":"0.19.0-canary.80b5d20d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a1dcfe97c.0","@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0ljU7eASBWKjgvPvwzyY0MP+9ELKLye9QsSpO2jx4y1faev+ymGI1B2b4pLgLXKTQmtwOyo6nQwiUQh6aMF16A==","shasum":"f6464e4c753f43c14acdaf4087b93ecafe10e68a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":79701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYOuCRA9TVsSAnZWagAAJHwP/0IxOCNcBCN8tEex3Qp3\nsfDFiF1eFoHungz9IlmjtJUcFMB0RYUF30ShNBO4eLTgkzB5ZnAfW9xMK8PO\ngPl2bJuDvsUAxJC055wstIorUionxPoyv6JxsSj4nvq+vOFiW1bjGQTo4JOq\np5WlgfEkJpgkX4+ixshGL5dx0sWi77DTYEm4FMwV1QHYbO4pQxELtb4OEoxe\nQVsAK0rnHvQgMu0OVAaA/isjh4QpAGb0qp4fR7jY1lEAi4D+ULa/XA1OMgWE\nW44blbFuNC3KPZJwn1+ScvxKXY2lFHFlgouec6PFxfaQsCplbgzwxX1fql1A\nklxRT0KLACpJvShTEMUGLTDrKNfn/1vTuK0XSG7Ds2hwxGcit/FqlYqLZbIK\nSaBCocznREW9Yx4wr4L1XyjaxE0Sa8+8/32heEst24heIC0TMDsy3Gdb3enD\nJQEYnrN1nb5lfsIaW1/9FalbzfmzWZAAkuMOFPdgJycZn7kbsXdTVpKwa3gn\nmg5BtdLMhJbQtQ0+6bX/N/hoUgvhpC8nYHg6pgxmxzDurehUAEhHgI3ghsBj\n8bI054LiMT0UHkjZ/20sDyahCk0/nhivrusbykdMLSWasSosf+mAmQF3yTP4\nwvkN7Q4bFFoESsLKNMRI4+Ykx/Gka7yxnYmUwLF3yoPpDHAN0tfT4hiQsCnB\nRFH+\r\n=ih/+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLEzjs8l4RiWYSkNCREAZabYTHEwPXPS7U6t+Cv6MgUAiBBlS7GE5fcDtwZke5KxqnYA7OO59BMtNJyy2T4/hAgqQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.80b5d20d.0_1597342638357_0.4170838944899711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-button","version":"0.19.0-canary.758635ed.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.758635ed.0","@material/mwc-ripple":"0.19.0-canary.758635ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a1dcfe97c.0","@material/elevation":"=8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"=8.0.0-canary.a1dcfe97c.0","@material/theme":"=8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qUjsLBYgndDzKB6mEsma7h1ThSnoavrPOYqI9OkDhy/jRQhlVW6Ow2xdyyiW3JUUF5j3nsLfOn+9OBZIwK2Nqg==","shasum":"e4d6f930497143a5d7ef8c0e1fd98a72050522cf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":79638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsb1CRA9TVsSAnZWagAAfo8P/1CGqSEzkd/aFW9nUNC/\nD1A62yJGVXaZjuFFOAQUTtVv8eoEJU+Oru8BnovyX3UrQDvRk2xLkJjaFJxm\nNWQqCy+qt4fs6cstEfoz9rOSDHklcAU52c4OYZ614yiOWUDGLbeu9qU3rDgH\nIOOzysBDCqWO1yiEEid3a5DKQ/iSRCWtR6tysXImQDzS1KKjGnLM01PZgF5D\n2QipOmJAR7g2zHc6gR/tia7Vs58hfj00Z549pQaA5vLBW1O0O2OAzD537iGe\n89aWsVR2/Eem/WXIRKIYG1fYqy/7GxRo1oogoOYjIAnASOehGUxenjAZVki1\n2Xrj8XrgzgSOueXCx5NZ0xteCA6o3bYYXekqVBsdbzuDEVqtIQdp5EDry+x4\nTFJ4dYDqVkHRKkD2kG/ISriFMbeshCtjhMGW2zfy6LZPHMjD3zlfHAP4PZ3G\nVmIYiKhNJuPn/y541i2fLlWudR+9hxMCEj+zrAIQsw8bmmOcrSuAbeNo6Mf+\n8DbC3Nx2l4h4O2HTA/guqEPY+j5r95lfFs+C86wqaO23KkkTpayVVmcOeqJ8\nO2/5mGiHgVKUXxtOqjkmpxQ5egINFcM60eZQcKrWQTqVY1/CFs9XIrZSIp9A\nzdiuh7TD89zKfDUlhMST8xn57FZP/N1sH9Ra4vwnuWXTxF5K8ppu2vmnlrh4\nnE+L\r\n=jwha\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQXacOMibznoidXXn/gGaTLtbBqvrA5ffK9zK7Kb/EAAiBrou97iyozJWcm96xFvY2wkuDNaMb2jtmfcx/doPM72Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.758635ed.0_1597425396579_0.5736318582201698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-button","version":"0.19.0-canary.18d6b808.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.18d6b808.0","@material/mwc-ripple":"0.19.0-canary.18d6b808.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6hLI9xfyymS5dtFHkNGM7vre5MO8ml21XvI5jf2/vUJICL0N61MByqAH3XfF0uzlLERrhnI5JJ63H89DfMlvBw==","shasum":"bbfb0bfd4c5eaf95f88d5860225d2c1c7c4ad2de","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":79638,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlSCRA9TVsSAnZWagAAvfAP/2zfE7Ph0mM52o6lc7Do\nq0bZqjYTUxGg+3qpOBTG9eWMC1d87zHwn/08kLBrFZoDngXNIcS03YMdmk+/\nhJLeMuQyr3N6hW1HmpHgUbg6HAbweuD7VEdg2VYrdioR4Mi06e4g/2tYD2n+\npx+mDpUGTTON4nCEFyhl4y4JjxgRp23v57rGCpyqIbjMkVcpcnfFLbtY1rl4\nx4+ZBICJqRMC0BMztB/I4XJtte+8Fdu6F0c44c+t53KrZ6ib3j+B3S5rh7Sw\nwP9QJCuh/SNnQcHRQ3dXGmB3mngQZAezGycKoUtMYa9l8QlINUU/nwzW7HAT\nOMRE8mO9H/h62OLqz6vH5Mro2WhBNFc7Gsxoww3l/L4hWpfDLiu5/jEYsCvj\njUA5/Z81OpkDV4ORfJGXRnZcxotfVv2dLyutnuHlOHM43xo/CZ+6TSfpqAuu\n7PmnvP/SQLCZFAfPkVOxKEUAZQyxJWqiX4knM86Q7jtNJrwXLm1DiHSJBE9h\nvLcimf2lU76HBjd2VXlMe3s1udph8eBKoAlzV0NJDOUP1AbErM2KxIkwCaY0\nJ8oy8NwFIduakFiXubZghBUiwGc9raFdyUVwydr2a8cAlXMrjHMrBwedAaBk\n1p7fdEWM/yDeOCuq7sjZttkl24DJH7N5PgyO2xDUZUG1qL6HiLSA0jX9+i5v\niGck\r\n=DK4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfvGpgqFZEXB2UtR65sN1y0hXSO+HH5cTyqsG4HKK/4AiEA/+9sEdkUwNLqra/fEddhM2s5OvfCFtSstdIAo74Tr80="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.18d6b808.0_1597446481957_0.9565203295528433"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-button","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.5f8ffbd1.0","@material/mwc-ripple":"0.19.0-canary.5f8ffbd1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-S26aFU7zHhScrVysb65meWxYalBEAICVK2bMssmyiw4WXSw6N4Eqi28CcZUZdxkDP2/BKmq1d3Pnp6n2u39e2Q==","shasum":"9bd180b17cd1696c6d726ce6aed6767c508bc92b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":24,"unpackedSize":94736,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGACRA9TVsSAnZWagAAYcsP/RVbEw7lCcUs9LNwIx0+\nFkUASU17DSmzY4iv3Zyb75WSEN1SbJX3L0IkBndFXLp2+WgNkqQqbC0HfIZc\noV6T1eAjjiuGpoxbD5XrEn75i1I+K64xjLiXIJHY0AUIyDod94utlnE8h6Jv\ntKDj9omQCw0n6piHRbKGQm5vNZPpPlktMWM/6WquLEF3cYxL6ZAA1GBKg9md\n3t3SsvsWxMOlDQOLAbcLDP17YtJ337sYAe9uaJmNWGWFpcMdghiKCSf5X1gz\niUw4HLCz2Zzjhf/J4yB/h9qBItte92QVYvp+vL6rV3KtvAuo1V+/DnFtgsdC\nsng/vx9ilJ+7KyzLlUWsYYeINId4idTJjagNPJ1FPA8KDTtUqYh/9rJuB681\nazM4y8ZcDQSPAsDrok8warfsd9qhTD5FmRpXVHjO4/LAvY8+6SlVPexUWsb6\nmB7SKNRBBE3i+smm1kFdg08pcDpE4s8Sa0EYIqBheSgPE/Qi9UGD7xUPQCrd\njmPogIROd8dWoHI/Nn1yLGDso7hRbRnCB40IGM7R6f5H+I78qz19atahknWb\nB9PwMwT1pFD4wTDIkup1KyO1PDtvs7D3Lj3DGlX4mj6SlApAWWe6F2x6vj5q\nrILSK7OSxlXH7d2ZNCqVCa9jkANPECoBNJFkuH5f6rg/JoURZ89NsCg1UCX/\n/Mpr\r\n=UTGR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDavKGAh4Gbbzu7n84ajcUOot3hd0d6wWfISPEKVzjfFQIgWszLm6SjrTwSXCV2ZD1hVN+cBzvfh0eVh96FPrZBETc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.5f8ffbd1.0_1597702528492_0.49324186396270875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-button","version":"0.19.0-canary.8604d59e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.8604d59e.0","@material/mwc-ripple":"0.19.0-canary.8604d59e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.150f427a0.0","@material/elevation":"=8.0.0-canary.150f427a0.0","@material/feature-targeting":"=8.0.0-canary.150f427a0.0","@material/theme":"=8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-NsdIpV/EsPjBNw437czWcVdcLfCnqCPFVotJCBshpIHrWde3pocu1Udn661ZK4xewUZ1neX/oezULMGkezWeow==","shasum":"d9be03dcafaf44a5482cd78c5e3acc907e3a9e6c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.8604d59e.0.tgz","fileCount":24,"unpackedSize":94712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyimCRA9TVsSAnZWagAAajsP/1KAm/JaXj3HyHXzqIw0\nLujaMu/ghzdqujYvSMV6nX+Vy7eBP0dB+36BtVfWjyldjL2Y1WlZ/sQUXhQx\nXULVWfnr8AvmJ3hu7Hayp5Snbo21ga1GSnQ3tYj2Qazr1Ox1k7BoODzd6Cpg\nqM/1m0bAafO+8YQydZkgUCUitjYxfaLOfX7wJa49LN0qm1xzdkeWNJqJRbXr\n5S9ELUEgu4/UYhLcVAJ32qm1kFFdKWLDQAbPi0RE2CsY7ARC0UlCsiq5USbx\nPnS3tmZyrvxYkfD9FBBvTeJnRTfhs9gBayRQzfbIG4RHVtTtpKRAoysgv6ea\n0VtuA1PmtCkRo6TkWCuqFLxFi/YtWA4JcXyEOWufyoX1rXrORlTwEsPJJ0rF\n6pcTezHa2IjTGppoAi5fSovb/Qv8G3jMrra0nXq7yEkmkWVa+kqBuqvIrf9v\nIqKxY6nLXk0jNW/6h6FA+XVhhk5MMdEKEpEMFlMfJNtoPyox9mWbmy/yeg0/\n6Xjhb4zJI6gUdZNgrU4lCb9gma7TuKInMQX8ikQgrRNv0PH9sT4KDs8+LzQi\n1afyE+8YuILtyn3GI+3ugZRwA/VLQVvmnQk1G74vzatVLOlHA9+i47KSFXLA\nlrkED2eYwXEwGnTX99G5eAhHtxKaWBk/0ShmEeZhUIL8sdeHqA45ysfKN/qJ\n05CM\r\n=Blve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKmAU1jUTVFKinqtfoQMkcBq+N/yWklk6farwQzj4PcAiBH9oaupgTlCOkCNOXbEx2z0SuxcPLVIwyFXrGVyOmiFg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.8604d59e.0_1597712549737_0.33157038752028734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-button","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.1d7d5e34.0","@material/mwc-ripple":"0.19.0-canary.1d7d5e34.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IFuCKNyELilRsyIDB/n1c+wnDafaU0oyvZ9Eh6K7cWMaPlu4tTxxqAjJz3hJUYdNcmLmNCqEU1Ix84nFoBMJRg==","shasum":"a9b1ed7800368dd75964402149ba17b21b14ed10","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.1d7d5e34.0.tgz","fileCount":24,"unpackedSize":94712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyotCRA9TVsSAnZWagAAOycP/2FV+t5RH1eqejIQV2B8\n3RcfVDvyC5/DnwGtcTgDTxX4xkQtbcynh2t7U+BGa3UNssnS3TgBJzL9GOr+\nG/wO17Y2Kox1fbGG1K51OBNDb3MmCzu65vCkHt+m8pbf3x5WS+3SaWPY3Gt8\nvZkeBsM40kMQhABLZwRnTmmZVnrzZrXA2Ocren5szqdZXOhVtShkoHK/Hn5C\nnawHkHocN+F2Ek/7UzpyKaMH7rE45PlKEZZwv1WgTlPI83udLa7zvnx2ObLy\n+tQ+MuirSnhzyonUVgqarUs2BZWvA3VPHRtonHPBiRlEaNQK76lZ9fkt88Cf\nZ55JinAEbCQkEGd/5gAok8RvsiYl/UPHP65Rd85Ne7mfITt+TOFAYIveuVRj\nUItSOQA8EP6W3Kr4tHmmZwT7hzGUTaa8zSsgyCIM9AOF27NrAo8CDW952Iuj\nBEbkSc0IszFrdijLPfw7GULWBbeEfJXsEIi1IRQGzjrfAgLF1kZVLe8zraqc\nAfZOFJfceI4wz+Mn0D24W0gdGRRJJLrU5FH6bFgmkp31oWsCi8lYeLiIarHG\nVB9HlM7NHr/53JYaW7Ir9MPqpIKZywIxTTqWtgQuwaEia2C9JCJljtt6IGmP\n+1Mo1L9pLGu/JJC6Zsysa9HfBZj5wfzdU5r3D+M3P7Ev91JysG4xRec++Diw\nEHvX\r\n=sIFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvb0I2cPY7U0AcCK5w9/gKxPN1cDI9WWt0KH3e5KiiPwIgMpIIGYlY84gP00AVQSl/mDVt5aVU3gAdaURdVBijwwc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.1d7d5e34.0_1597712941211_0.168168942965218"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9cc95c07.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9cc95c07.0","@material/mwc-ripple":"0.19.0-canary.9cc95c07.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-che2JcXxMLzcnBGvhIsxJ9DlhHNUc/bAbb8OjX99hrPN0g2QL04ezoBrM4G6+bbxdrLoeUwPIf0UoBmPcVGbIw==","shasum":"35f6b237dbbee91ed030acafe5da28642c896afd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9cc95c07.0.tgz","fileCount":24,"unpackedSize":94712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyv7CRA9TVsSAnZWagAAAHsP/iV4pUAaKn+ZI0dFBTlP\nREs1Ttww5nvTengnOG5ViaYEK2D4dyYqea/PJe/0ZSh5MtXu/0ODMYOPynvX\n4fitT754QVt2YdB0fYLcOUePwSetrirXwSg4RFOUOhjFrznXRlh3/N2yq/YS\nNAwtj59EANJ8Vp2w72sysHGbzec5kfjcUlmRKr9EpKmr8/06MtwzVDt1yswy\nEFd1IE3hOwlP4FhG7PbhX1plpU+n03bg1I4/EDulWXprQWEIUQbB7R3jjniO\naEkdF1/6DpitJp177phXs/xC7Qhu+cYdbLgmKbRk76/emuauu9FwCKxPuOxr\nqwk0HPrDXrSilawL4YHzUwas52KHC7JfaPeU2j17S/9x/nVSMBtSPOrKRIFF\nWMXKsoo0u5iSK5sn4iclcVwTLJU0iwgj1+eU5XFQX2Ebe6T/g/xLgtS9Rggd\nn1FMOkM9t3PrTazZAMqYJuGB7Eq1UM9DSC1f8dJKPmVi1Pzds98lc/HUZ4kn\nl+gXk9ulh50m06u0jdaNDvr/uQnSrPw09UVRAyENh5d8QmxJHCoSMX8qWwX4\npk7qc31uIs1dQ08lwKDgs4NThPezt0hjNpmK1zQwsWzKOH+YnVoRH8Yiq/do\n57ZGz3ZhKamaJ+kvNFNDfYvzw2v6Q1PU09jjvEAkcO9fi5ENtyBKQGs871ir\nZh2c\r\n=KMFY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpYKV4OmSZvpJWQDoO3NUxx+wPm+nrCpmDEHcfELNjOAiEAxrq2zW1phxsmNeyUSh7InWyjbu6kPhzE1tEBJgdWuy0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9cc95c07.0_1597713402718_0.6395065376100975"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9f65ced3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9f65ced3.0","@material/mwc-ripple":"0.19.0-canary.9f65ced3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.defa599a8.0","@material/elevation":"=8.0.0-canary.defa599a8.0","@material/feature-targeting":"=8.0.0-canary.defa599a8.0","@material/theme":"=8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cJh9RxbdqkRqFd/N6+iDKh61kADX3l671NmWkI4eqZjOGC776v27c6/Wl9dBXyFXhfO/+lQkApKDIL7YRfUTVQ==","shasum":"f5b307821cd41fd3918f529dd506ed4e7e0c35c2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9f65ced3.0.tgz","fileCount":24,"unpackedSize":94873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcHCRA9TVsSAnZWagAAltgP/jSSdJgOr1tev0JT8Dj4\nZDskLvhj2sf8WPByvHewXdPc7SdfnM/eqvoCIzUIn3herdZlQkuEdGahCuxK\ntAmdIdZ6qOCgQB3tmcpO4kyft7IhJVZiSkTvCAZoCH011cKWYrkBUI13l54Q\nz98rtVNBfrz0uWwTx6OkkYOEd1XeWlPkGhQ5I7EQQq4HNGsn8I3LM9EzP8fn\nIJn6Lr3aX/ogRgMYlfgnv/47qqCa2qqUb3zLM1ZKcFJXysoAfv+4eXX496BZ\nFN8UrCldlSlUl4vaZ0h1kC1Ukdeb7jUDqWJwKyo2Ii2EYszBAkmXqnFHyCRy\n61mNlW0UeUi2c8clzPt2ZeZ/M2pQX1DuW4pksPu7otPv5458rl4SRuE6GzgJ\nRFeZ8N5zpl4MN9VjG29CIUbjzTQ/D+6lED1RWZiiznnYaQADEefmNXnMN4uF\nNCABZOs3TpY1DPwxHjV5f5gbVv6DLGJ9XtcT3G2tYXJffFgjKUYLCtz+MKa7\nkLGf/jyyHysooY6vUtbNDFemvnPKyhMoqv7I9yHeYIS5AqDPleUFkeUcFLy5\nGahjDpM1Dof1RRyn+j29tcrm67KmMFiagXm6mxr5jRrrzqCqHJws8da9y1nT\ntziqbM6hM6yE7yGf+OrbYmmO8K4gy/miswodbg2/Cvy5GvNZUx467qYcmnEt\n/6rl\r\n=jK4E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4vRE6eJLyBs7B+5/ecK5rDM4FtkQYDbZva9nQa6JeaQIhAIeoLSzc09cvwBS6KeHavqsedPkqsgZFtr8GxuPxIRxj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9f65ced3.0_1597781766743_0.7698392007720973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-button","version":"0.19.0-canary.5962b365.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.5962b365.0","@material/mwc-ripple":"0.19.0-canary.5962b365.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.66b8ed7e6.0","@material/elevation":"=8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"=8.0.0-canary.66b8ed7e6.0","@material/theme":"=8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0m9Fr3kse308kIQYnJOmee4MgCccZFLqYVmSuSe2CKez8+N9AGnrNw1jt6l+H+8EMYGsjL20o8CA07JuwW2jsQ==","shasum":"fbf3d8df00a3b938fb29ba9130075ab58aaec99f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.5962b365.0.tgz","fileCount":24,"unpackedSize":94873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYuDCRA9TVsSAnZWagAAFU4QAIzZEKJEuKUMyuPtRi4+\nszeChSHxYzRFes8E+Zg9/4AUEtpJiyRl52ept28JoZt+bnl+U/0LJ774djJg\nKQ6/8Z5js//IhRZBhichXLGy8w+lAJx+vuE2KURNXXtwWyolMNTPMZlcMviT\nAfcMNTeuYcyGXw68k+l58tbYoXxIQukw0OsCZAR14PMQbCHtGTA1AKgiZv50\nSIh38TUa/fv++hVWibAxRjbgVbwjr0/yI0eGEkCctEnjKtAZYweyY7qf+WWq\nr7ThKXsQF2K4wW1axRn7o2Hq14ZH0mjJWSlC/3BagTwoJ+udgGm978cE34BO\nUbT3CPxyfg9QVMp07EzEwwKOj755136Dl04FzKTlq9h7qUaH5lxTq1zkfQie\nn8XDM+Mmgo9FHedSqRCdRZiqmghuPYfWB8POsXntdX7vn2W7uwDU8vuIsi8t\nlqDjpPVsrCfC/UvHYFnhJkkg+acrJv1VBkUzyXXedsC1FVTAyQtQuaw5j3IF\npjis/yukYfCEtMyoKriULHu2/RjHpuVtUArvIjD/NpFvPs86OqiIcEQqm8hr\nyBqDIaDa5/nerry7yvNnnxKwnXXfS/qoh7ji4ISCQNB5MwtDoS/zt5e1UKXW\n8u7yg6JeUdRyBJmtu5mzUzvqrHyGk1dMmKJj414Loc0XrS739lF1REeJc7r8\nUJv1\r\n=DCrM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqfTo716e8K/SCsunMahvnsEblbv1zVmV8ITl6+A83EAiAPiwvGiE+iQFu7NCXuAtmSyZyX9yGzRZTCL/9Bi9USiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.5962b365.0_1597868930776_0.8094240607398946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9c9ec756.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9c9ec756.0","@material/mwc-ripple":"0.19.0-canary.9c9ec756.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lBsvh4Pu/8akBGtaeNgekRG6+UzerkKfrM9bBrTjWHHrSws857TWFU2ziA8893xo4jRD+FPVIaP7okBH0doAww==","shasum":"b84b8fda28a6cef12ee0834f1d81b6efda2f39fe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9c9ec756.0.tgz","fileCount":24,"unpackedSize":94873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsc6CRA9TVsSAnZWagAA9IYP+QHoOXfREy4A4LWXb3RS\nvmfGNBNyNnnP5Su2MtHBfVKspvf3KXRY3RPoHX46ZKIr+ihTDEsTRdbMEzas\nmeGwwrdL589RGGIfjbfgKaiMDsR3x5/QArXlQiDAi1IOYCw/wAk9gt5lPPvQ\nd3/8+Ne+vxfIJgFV87C1ADG1qKczZN5aF1+cHn0UpNB6F53DU32QLNjYmn45\noPTImWbKVXZNtq86szdxsttvwSb4TjXqRKx5R1jbupU/nsxe6h94gbhd9lTT\nm73WEuNrNqe/QB3ZHCDyW4YATsK3AVnrP8RjXmVye1bcx/CULyYz5CgkGlmS\ncq2KZm99Uybc+EP5RbywQDEnhWGz+T8eUZ5IWhZBNq1b1RF7YCRWHKphgqxe\nMrn0+Cczu6br735SS0p9cBKLBJQEubDioVxGgK9cQyWGZnJ/IdBSzKhwLdc2\nxSBXZGQuOWW2gium1U6VRdeXkySBPCLuDO9BnceSEfbUU1hK7or/QNSs1Zci\np5uRD5hfqCyznVcQAw5/+Oc0yX3qECBCCU4NRvr9es/gQtv9BHZcO2D3mnk0\n0yAJWEyJSckUKdsXxDqrr3WxjgzZE2XoG36/Nl59wmK1wMpb1+MPEh+ioeKN\nsGfkeL0CRbtgL7Vj/qGPAWU1ZJD/QDIvo+OELM4PywDhrxBUuDoAf9lSnZq0\nLfmF\r\n=PHq0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/yCDH5lU9SRhHOkX8RfFptL8cISfArLy9/XVcBsXGPAIgKvB9JG/lpd91Mh1a2XUPeSgyMCPSLXwvIFESZRN8o4Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9c9ec756.0_1597949753654_0.4520975621001797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-button","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.fa0ad66a.0","@material/mwc-ripple":"0.19.0-canary.fa0ad66a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MNBY2051wu+L0oWiHx+z1g94Q1UN8MlpAvcRBz1o3SeGeaD9awynO/vMQ0ng27poieOU6+UztxYlfk8C2Jpd9A==","shasum":"37484511521fd3d083d78798210c548db8981506","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.fa0ad66a.0.tgz","fileCount":24,"unpackedSize":94873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt50CRA9TVsSAnZWagAAwnkP/0c+RVdd648vC0OTXcbF\ntNfkjNvHkvdn62PCLppYSu04FeQgHlyAgNf4Ke2J7jh9T9zyRmytgLulbj8X\nPrH+u2hzukyow+5FD7lySLRF01HPUhTYfBcbQLXx1oEhpjXWXuiNY5JkqSNp\nGNKfN2a61pxbwtecwqdTecOgkr3dcRCrxSTb6FlFbuUlGoQq/wy2jattpHm0\nylkxWoic9DxrenysZ4HURYV5P8fzwmPnryEvTcsT5r7d+rwmKhyEPR6KyUeh\nubYYlyK20vkF4oDjVy0CNFyNgKOXUw9zWVcpkHnd+Wg1UtPuoARU/pzOmDYH\n13ZYf+7EdVW/ChfsQw+4Me1oMLNAD60PV3WKfCv20gvkhKYwJ9zXnEgLjWxN\nyaB/e+RzaBegdQgoCLTP4tGJ9fV7u1P9i9QZUcBZOmt03Cv/hUaLoDQwgs9T\n8CBhA5U1XdqyJ/giv2Te//Kt96PPLQtKIHorlhgFDX6NVHSGvfdLFAQNNXHC\nH/SXGGYQAwF388HxTD8KKB74XGk0ZjCZj3qoZpPKE0OPfm1Zr4Iah8a3QP8t\n9o+5I8VtS5DywD182OatS6GH8/gPcJDl5GZkTiR0LWzKq529Vocl9lizTGia\nHb+V0YLvMc7rSFOjHlrQGY0YmTtcSgI5rzCVmqma/GWQ5kc7TfknUVf6igf3\nyQRq\r\n=8v7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHUJQsOgH7k4RPursz5MrePr2vbdSn/TXjZHKxXBtNlAIgWPwAfjgg5/XOVNwU8epkKql+iT5p0UZNSGuCmK/5qzM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.fa0ad66a.0_1597955700363_0.8522400416042806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-button","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.06ecdd6b.0","@material/mwc-ripple":"0.19.0-canary.06ecdd6b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.da72839f4.0","@material/elevation":"=8.0.0-canary.da72839f4.0","@material/feature-targeting":"=8.0.0-canary.da72839f4.0","@material/theme":"=8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rUFgLYjLiVPgep2VLQNn2+3eiXwSdrdUwI6nnYhuhEWInCWvtwIF9E+DqAXLvLdEue5EoK3cOk0v9BxoknJC4w==","shasum":"864c80b09d0e2f70a28a83896805a1bb6995be52","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.06ecdd6b.0.tgz","fileCount":24,"unpackedSize":94873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxICRA9TVsSAnZWagAAFwgP/RaSqsI58YKGhhnvQwiy\n+Lrmi9YFBHQdJ1ys8ihPQoi11auC6ee41EfNrjf4q3L2CcgimNzRYPVAMDXy\nmdruZIXk4IL0yQT2VvoLDGJaTqSSH4MbY6hjjnNb9GIluHBfkovM+Zu7E4ZM\nQpFvdOKe6IPUPt4BZbJ+/zg6hfdUcKpGIBJJ8Bcb5kTYJz/CqFbZdgufcI7Y\nb2Ae3+G3ilsPPwUQa2Y4AyrbpgG3tJ6KmOT+b90IJ4dSIpd1kkseZNPgzaPX\nSogPOGGgI8wKUdu4sbeDyXKNYlf24arpV7vadf4552JuAtuns5lI1VmG45Wz\nstaaTlSD70AYZoWePxu/ciXYhdx3Ytn44O9LcnmVHLeYFbo89WVmGqett8y/\nYh0+jB2WQRgVzA1oCq+RNT55+02cx4I7iDfAgoNBCjEQS7lkyEZ4lTzVQRgc\nmMFQ2D4oeBSTXB52ti+rs2QX7RQu/RsAHQybbn7ZPlben7UJBSGYoWM3BuRk\n0XE+E2Q9hOPCKYpk8qzDXC7mVB0CCaK45snVW7IFsDgzlFUiYqvjJHAhzeIG\n278xSsgfaqTrtSfhlN0RJknZ+Oez/PVesjndxnBAekOlPgXyDDGlNoCsSPLO\nCOfVz9W6xaoz7UJnBwuQkJ5wzCbB3efseIDN3vcwxuu6RmUUKoaMovcv3zH0\nHyIi\r\n=bgPU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuVeSyoKHbnn0xE35HDfEzouqmTTM1OnWH2kv/XAf7xAIhAM5omNzkSLtNDP6Nxa3ibp+bF/4rwOljv93Ekcoir/r/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.06ecdd6b.0_1597959240224_0.19418384492666796"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-button","version":"0.19.0-canary.2bca2318.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.2bca2318.0","@material/mwc-ripple":"0.19.0-canary.2bca2318.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/color_6200ee.png) `--mdc-theme-primary` | Color of the outline of an outlined element. (Overrides `--mdc-theme-primary`)\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/button/images/color_0,0,0,37.png) `--mdc-button-disabled-ink-color` | Sets the color of the outline of a disabled outlined button. (Overrides `--mdc-button-disabled-ink-color`)\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Eh3ocJa8Vu3DCL0tT4JMRKEteqHfYDYKlTrv7ITieGjc7YdNC5CeMsRt03xCOzOkT32GygUSOlULiKW/3jVT1g==","shasum":"50f391288e91315bfa88f2357d04dcfe6aef624f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.2bca2318.0.tgz","fileCount":24,"unpackedSize":94873,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAnZCRA9TVsSAnZWagAAWf8P/RziSY53tu1odwGSbX3s\ntKEnZJ15UoeH33UirY1yicGwaMzT0IQ6lPN25wdh9dC4CgO2mQTI14/33yQF\n+Kdw0EjS/7OAo1HvN0aDDikQljPaq2AvRC63F1xzN0AAcwAOx+B1WhvqPvSU\ngIQJFhHJrqy604Kzf9FuZlXtC9/Yk/Nzo4DFEzl0PUvKn3HkdYdWbppHbO+Z\nCK9byNVi4/T9hmqQuTCKCbgwNY40uhGnONC3N7zSfqiFFaAcSQt9T77QxtVl\nAOobpyWrrFUC8ds1i71bcpiKLV51dpWzAnyudRE30nfe5viqumUt0Zngr39Q\nAXuGdL8FmeOmR97QZnYEORqgsrNtNpDJlaucN5NCjZpBgSB/0iUBTN126dkv\nWJC8of2svuToB4B2e/oF53pt27E2Y5AafaV4Zn5T95FiSj83R2Wkx2tfwV6f\n0qlcUW/ByI2YJtz0fgc33M89RDdZPO2xkF3dB3UJEU1OM6v3ex9cY0b34w3A\nGRoFy/u+0JIU4d6/2x5Q/opUysh+ZwpHn/luG0Mdgnftpyz2gSrvoSpREvl7\n8zv397AWw6uvdUxoNGBDiw3iu2ndKx+zrMZYh92R+SKbr0wILHHklxg/i8S2\nEqjxdC0wEzX/bFvo5ub7FG1B0EgzMg3H+l7z283df5vEcvzn+JBErFDVDaff\nsOYC\r\n=q1Y6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3AKw0ZbljxP2Jj2E56GSC5enep1YY1uA5ebNGHETV+AiAjaG0hI9UJLVF5PAAMTstMEjLGr65ZLJVwjoII2OPZkA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.2bca2318.0_1598032345424_0.7729558334631925"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-button","version":"0.19.0-canary.6aa47265.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.6aa47265.0","@material/mwc-ripple":"0.19.0-canary.6aa47265.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vycyI9XKw5EYYuHxnBmsRWLmkmR2SdRKO/fz5dFZMNORNlWSVaD3dE9uhehMjyAiZwoOsYoJQ1WvLXnw/SFEFA==","shasum":"ea1c05bad61d8117067aaca6b458275b5ee4b5b6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.6aa47265.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9jCRA9TVsSAnZWagAA5TMQAJta4FwUNmPclRXQbLsW\nemFPxn5oC+k7z1+3cN6Hygau/s+2A5Kuiq5Gu1WQELmylMdb1QCjtlFfi2/H\ne4Ruu7OtIFKvIOWWVCVc16W6+cX7Y/lKDeYy1CVTY7LCabcFffvSHFmwmc/F\nqLeQ5SPrh521yktB1Dpp5UQx2nUJCJNMD3PzGwPCYQysKr4QIzj+c2ngIVoT\n8v0SaddF2fWOpDSkjv1aiOA1rufDKW7y13zPL45MgQ5CenxYfQ2KL7UHQkOr\n60M2pr6RPypD+Wb9c2srFbEePygoDm/Zl0yNdcdPu1AXKhknIbR8NBsIBuUZ\nrprseM6lve4ug6JfrYTTL0V7dXn83/hC0sna9epqfFDdCCxRr8k/M0GWvFvC\nvHa45RqY02sC7Dk4iPc0y3R4CNaLl2YjOw4VW5r0mUjpfbOKLD/epculdiUz\nHt5nmQyWDZHJnTsW/L1cWL5yRgY97aDAD01we3U7q5WaRnXItJ4uZEVYF0/F\nj39x9lKIReWlP6s2Ztfp24Ova6OlKDaZIXlP6bVp8HEd/lqgjn7xZeuW8TN6\nDgZQg5quYPhjqWnl0znjVdY42biHuFSbFGefypp6SscwDlebtH02tFVykH0T\n4UdocM2QeHr9TOU1faQwk0FtQTE2Nwx/HR5538hWHCw5uj5SOnzA0pmO3PzW\n/5k5\r\n=a8z+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcoH868I9wcUfrN/nYuSnDpeE43vC+1Cy2FDOzutcQZgIgQ4nTmf0xsMwONsiD3/v+Y8DB9pJtjAewuVzRf8EyCRk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.6aa47265.0_1598033763435_0.8674294645922558"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-button","version":"0.19.0-canary.e7202a07.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.e7202a07.0","@material/mwc-ripple":"0.19.0-canary.e7202a07.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.95e4eeea7.0","@material/elevation":"=8.0.0-canary.95e4eeea7.0","@material/ripple":"=8.0.0-canary.95e4eeea7.0","@material/shape":"=8.0.0-canary.95e4eeea7.0","@material/theme":"=8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-00e18kHOYXIkn2X6ptqJeC8hRXkm9hp6D+wwT7COVEof0jl7UJM429qz0bQcmyyLlXEKcn+3mNcxNv31GovH0g==","shasum":"3b309455769233b763e9717b428adbe007d6e623","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.e7202a07.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB80CRA9TVsSAnZWagAAJfsP/1URIjh1gFJAyTa2364k\njvWesvrga4z+yNUkUzG0HXddmxGS3HtvrmdFo7JSd77A8M7dxkq1CvS+Jpws\nIoQh5TidjGacWd0n/ArtFw8RpRkB+iLChvE5pBeBkKdu3/M8Cmjer+k+qD+S\nQQMSE36lS74AoUUCyMTR57Od46MjyevCtaQyKokl1TbvhhHHdbF45cHfgeHo\ncnQ7c5QYFsRXsCObz8Gwe4Q/9lZwKFsD02QERUMKH62EBi1m37XMkUB9Omae\noY6UkbOTPYiHpyRWGLwWbeMbPSVBd4fQS2eXRUvI4LaAcfPn6a0lHPCkuUPj\nKGBFfChQNjaTy5zF/GnC8TERX7PrFsxd1txiYp56n/RTRUDBIr9LtgcnM/zU\nBvXS0UMBWcSLVyIsdHTo0ZYO54/uwocXFFnYyUh950vP0B3MRYSGtoeiZr7F\nW0g4wRa8t1L2DtSPyiJNawfEb5HbL76ZdjDVRSkwGaEa9/v6WpdRcpJqhkTu\nRV07OCEyFiUO4SgwJgMZ9VA0p2N7h1ehY0v1ucaRdf6b+WXjAUCLS7Gk1rDe\nPxBY+J8poPr9vQOWPjnk+zYQiOr7fV4zZnQoZe1q5/XdBTNEF/o/uGS4L9qe\np0Tu0jpgcoTwKvxIVxiWcGGia8aJiXRc+dXYws1/BBenMG6QhwJPTomCchPS\nBrqt\r\n=7m/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2TvT92WbGmo9tw4gIciyszblSEz/oVa0Tj/nBKLE3vQIhAMgKeej3VegRK0bEthzHu/J9KuWi7iWXkrT9IfVfC05G"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.e7202a07.0_1598037811728_0.35353875184117967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-button","version":"0.19.0-canary.f208201e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.f208201e.0","@material/mwc-ripple":"0.19.0-canary.f208201e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TAE79t5ML2JlE5wkqodORzZQvM7HMmS7ReIIIl94YIDNnJ/DL8oyI5r+dNkvVd/xEEkmmYx77adgEgD+de7Blg==","shasum":"d25f404eceeb4598beaf99230841ccf33409b817","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.f208201e.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA7yCRA9TVsSAnZWagAAEU0QAJQd2HfbF1FjhHUx7S7w\n7baSjHHCmAYpNwyNK/5zJwIuEnj8ydYp641N1OxOJ5QJQCUapASG7EMrKNLN\n/94MH0dsgoCcvEnTporN7M+w0UrFE3WOqsW0QGm9NAH/kH/oRGLvvwiwCo0v\nawgjQ/pE+VSIg8k7szlTkGEa8WdXBwuAEkY4pbcI7GhB43E5uDrcIOswTB6f\n5h09fNHUr2mB1CbJ9iTRqlFjmf9J0lbkhtBsRfD1ZcXMRzVK2K4VN/PhK+M0\noWNLCTqJI+EkYrJpnvm8DrbG3Z1typgiCGiuERurCmwnvE3DqJfVuIo0eMGB\ng0f+2GnhLgMvgz4kpL94EvPkIjQbDSNAvG26t3vXFh/cio4ClmuEvCm4Q6/X\naWWb9smSZkRU8uYwrjb9QJfApR4P7ObnDNOo5eclSA1HFBerq1SLqMgvP9xY\nHIS/7uKfq9xifQRzqsbQkpGL1YQZliiS7xmaYe7+xo0OG5qW21lE1/inhecs\nkrmkrU4PhzPWor+cGtx4VX4dZ+Zfx3bPwcebcQhOceAKiODkAG0NAvAGaoEu\nwuiJAXTdv6ZlgIREyE7dSvsBfO+xbCtQScVcZ9dyc8YCIChnR0budKcsTVxy\n/BtgyttRcwxlFJsJxsoBqZBt64esyWNIABy2UrpUTDT7FoUv36dXwblWsGp6\n1jEh\r\n=Or+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPudGBNOqH1mD1X+YuL3E0V6pkwwCDjoSPl0ugJQbIlAIhAL6lAyNGzyaIQl0sVjCEu7GtGEDyX9+kbCKd23KcUsK5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.f208201e.0_1598295793583_0.0916509540634114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-button","version":"0.19.0-canary.14a172db.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.14a172db.0","@material/mwc-ripple":"0.19.0-canary.14a172db.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QngUucfQjumwRW4dIH1xwT+En/eOrgfR/hMKApZvntVmfSMTyU3+7UZjzm8JCMnqIIPi7KjptyBSwTWcK97MQA==","shasum":"14d261011d8061b1e8dccee55e1af0a5beebe838","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.14a172db.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWriCRA9TVsSAnZWagAAkC4P/3OaMKs/ckI6AAvjnQcE\n0xv+qpSNthfgHZaJ1PeipV1W1KiHFPVHR8n3L04Gg1YFDmaIlsmCIRkpYmnD\nOyce7puv4qIIFr7bsOje8FAj2M1U7xo4JlGhsyC92x6+dHPfhhSe4lTdXylN\ncLOoJ3JXvrDNfbCw4p538p3cz6RowekfFI44jUZdln9cBoemxhy0zeSP1klO\nQetChQ+lvYtDOQaCE6SEzp2hy73XYkHmmP+QnQHvxT4cpbwNopZWnZcS+gvw\n279CuS/9Ogt+47c8u0PAtibZj1bZF8qiC0TcasfReY/YbK8DF4bNBv7GKA62\nf6DTmdUhWKb1YL5x6DJyvjluRHJGSmNQIgxa4OpmxnsLUQpzpuvH3pLAAyQq\nHqkwZjVyi7LOiYcRUCG21V/5Bmao3IxklndNveHJg7Ied6lGu+u0vUsoMeoR\n8tqz5rxK/6cb79foO3DbdIYYpO2s2INusV68hjxgzEt3SnNV7C4cP4E6Yrso\nW4gpLHH6BAHWTkvjqxUjXG64R+wbeJLoiGj0e0H9AY/2as7Y8sLbuK88UAiH\nbsBYOn1PRmYZ/46phrQLWAbcCgz4d1a6Th4gvcVfdzDFy0nxyeYfmwQyolcC\nkPMygXj11ljQ25DJZQGCVE6b8s93JjrqsE9iRxFzrC5FzZmJc+BhyFusqdwk\nUA9i\r\n=P3m4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID3sjh4qmFXfkDpaDub5ip0HMw+3EjY4J2LtGCpz34eOAiBeHBD0wW24oNsPqH8dqlSgTqOfGfGmuLT3XJ/US0tNcg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.14a172db.0_1598384866638_0.835033561492704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-button","version":"0.19.0-canary.e6c1038d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.e6c1038d.0","@material/mwc-ripple":"0.19.0-canary.e6c1038d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a1c65593d.0","@material/elevation":"=8.0.0-canary.a1c65593d.0","@material/ripple":"=8.0.0-canary.a1c65593d.0","@material/shape":"=8.0.0-canary.a1c65593d.0","@material/theme":"=8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rPQs3c2Yl1HffRbk94nFHyU2I4LGjGHzv0+hPnBBRFRV5ksEXzrUNRc6ZlzwUZkAs5aHSCw70eTXaP5r7s4XBA==","shasum":"6502f3db87e850b50ecc8bb0b3b95ccb46363484","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.e6c1038d.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAtiCRA9TVsSAnZWagAAYP8P/RUTh/0J2QMpqHgDyMtx\n+hJJjetxOIn8M1wOap0z7quLgNKtIAt36zJvHN5tXvMl95Ox1fMduvSnwfTE\n7+OFhg9Hvz0LfT5RWwAqn3Sv+o4ld4slTZ0CnXd9O3Xis4aKL9INZwfF9dQ8\nx89w8jEu60W2no70U/HM2xn5CiAxfFpAWK9l5qMCj3xCFf49MS6Ti7D+9la8\nzaaJHFUMVhb+7RRHreVMjUx5ZslOp3/6jMOVq8RJsVHtUyCeOHJNCmanLrkm\n+DMIOijJASjFqPOGtv1TgmU/18MeosfY4qkq8rrCKInHvQfsYW3sUSkZG8VU\n96bqqC87AoVjQk3wmydB5fSE5io21teB+KvQbvq8KVTKjETX9tJ9czQf7OXv\nGJ933NnwlibTyif8i3PJnrdkvLDqRG7B1jF3grvECVUjmlOUQ6obSSFlLs4w\n/wUEyszA1cY1Y4kAzoKH3CzarMfWj7Tuin0Nc5oewCts837tf1ImJCfIjnTW\n6yvDN68sMZJkavo/uA17QGjJMtFcE+BDdj7y3/Wdq5ihiDZRWAxO2WoydXD0\ne60KPaeHbrAzhMaccvTFuahUZp5U+f/wLoKDM7VkHfAowBHRTWfZ62f1orHp\nTEwXwD9ZC6Hdu6X8MqN9H+YuFWteizemJkhhjkkHZ/Jm/70k71Pj4AEUwOeH\nNq6q\r\n=lMhp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBONvodBfAa/4wSFyizuuuy7dTcNFHnHliIkZq/l7QmwAiAtaS51v+vUk6gL1Gui9Cf7OMl+F5L1vuZWPvJNDqxhYg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.e6c1038d.0_1598557025622_0.8876195425996805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-button","version":"0.19.0-canary.34012082.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.34012082.0","@material/mwc-ripple":"0.19.0-canary.34012082.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.238216fc4.0","@material/elevation":"=8.0.0-canary.238216fc4.0","@material/ripple":"=8.0.0-canary.238216fc4.0","@material/shape":"=8.0.0-canary.238216fc4.0","@material/theme":"=8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uTELCMaB4gsAOjcQ5WDrQ7aoddY8aoMVxR3FGQjyk782F/hqO6B7+18JHOPoUCLy9t5vNUSyA7CKRZH7seAS3w==","shasum":"bbf086532a5f0fcb30846cb31fcfce5cf9899c12","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.34012082.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4FCRA9TVsSAnZWagAAZsoP/2O444ixKo2PffrDLWKw\nRVz7zs5bysNTUMz/H46obov/DCoeYhG37wzw2g6404dK9uTxf55MIaTEdLGc\n0+Rr3W/ZVQ8zgsghhKInzyC1sUo6CE4spuIkgLj0qqULcVsQfbMkyktcFk4Z\nf3km/Xd3Vfnpc2Z56Boo/jkCIbFPqVPaPaeNqYzk0YIjUw8zVKfu0KMK6n4O\nE2VHBJCmE6gUd5gJ9Ktpm7b3Dgk7sthBzQv4s/KSqGomOUnNaJBLfzE774n/\nHFxO+TKe7uYETfyAB73TszYzW23Tzq8xKvB8B0EMJFmWD/XaCJxcOZLWrmfV\ndFVhkr5rKSM7oW6NXJZ6upyKXS0TWIfXmFXU3434vkbl0+OluhZp/2p58N+x\nyjphXzNdKuU5eVx1PEsgpM1n7T5Y9Ssm6Hh5cgkh5W/L8qEwCNjNN42H9M48\nAc/RBGIfm8K+i5BfV+CDs/dcZeBHjPB4pzoGsmCsw9sD++DCNB08npQwmRER\nbRDDuQml1EiKHrsEOj/+pUjd2GOWAYp841vT/r8sAMeI849l1Z/vdW2LqgiP\n/TGrviz8yeLonrJI8uYWWemM793vfcr98aNfVtuHFyYAb+V7ArBxTlETHtK6\nk3TeOzTvhnS8sb8u6MEUMgnx3xQXi8dA8Ojmc2q/7vL08MuM1UdgFMAIgTPz\nYIEm\r\n=OP4j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzDqx10x7yt4k7QELmo+FuwNHbMy23v4l4MWV0cBbh1wIgYaubLhtFVHxmW9cHJrVVUbS2czxuXqBytAH5r8N1Xh8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.34012082.0_1598557700878_0.539942975379939"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-button","version":"0.19.0-canary.c073f7b8.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.c073f7b8.0","@material/mwc-ripple":"0.19.0-canary.c073f7b8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5hwua38AnS0sH6lyZEZprrF/fy4xrshFm5Gb60lal6KxprRxWOaiXXli9V14rYv3xNtnsVISgmgNaJOmdN5pGA==","shasum":"39f105dd677408f9ef5571a1626f70d8775b884e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.c073f7b8.0.tgz","fileCount":24,"unpackedSize":94697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTrtCRA9TVsSAnZWagAAY14QAJ1roO/mwefHazhobBNS\n2FhGvlbssLCBeXI0MLdO/m1y8i5l42Q0lJkbenwtnpoKOyrKQTiDS7cUrO+Z\nF4l25tX3iCUZ2VWyXgXHdD2CHSdxsSmYu8eYh/+/egNTMhlmAuD5FJLHlfUr\nSGkHjAfq0hDg+Azbwzy9DJ26/ksmcFs2O+HfZCXBHkrP/gjIoeIe5EKh1yxM\nKwOVB23fgd7dhMDoMgIFQ16SkzsjzsAPMmIgeffow4mJ6MNw+qWjdL8EJyCK\nqza65zr0HItlkWZ2s/vzLkIQqsyB8YpXKNFgYOHY2xdqZ3VoNO8UAWRtc993\ndLSIcbH/5VutmDLDJXCAzW/vknonQuUsJhGVEDcgb92HpRxlQMIAOeHh+CPg\nqsKrPxzAfnJC9c4OpxaypWjkZ5tgk4wXGWtKHlimbHZq3xCR+PPr8AQscRXq\n3i8iBSXLl+NiIHSBdhsnhipLbU5vh1eeum8QaRDC34r0b/k9Uy9zn5+r526d\nobdKw0on+rs8lzgYogQAjGddU393FHsuQeU34h+pWssREsg3P7P3rG9YlCZX\nzNdcF47M1Mm2aiepIO1bQn6A2/k0bT+tkPsvAsULftUnNftPx4kFLuoLd5w5\nOBLNiX8B6cEQaqJPmTMJlsWU8sUJ0nHAcChi8aa4u95jAbQFG5H/6ORAtYKo\nqfRp\r\n=ANwu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICh/A/GN2zoeCCxTcXylU1GYBGPvu58j/4eOlDQQ+TNzAiBKkGTVeCKn51o1x9feRusPQjAHuSExn8mBLzJatvUDdw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.c073f7b8.0_1598634733488_0.3037263055840955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-button","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.b7ae68ff.0","@material/mwc-ripple":"0.19.0-canary.b7ae68ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-y+Vw1XA2osqNR3Vs8fEAV7QNoct/6dNwavfK0J4Jd/aXbcQrmx982/x0vAMlcNoYgyhFuDh/6Cg5otDWHIG3dA==","shasum":"607b25e0b5c63e747fd76a094466ebe0e4b01179","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.b7ae68ff.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa7qCRA9TVsSAnZWagAAodEP/RgLlhR8LWrfMcDhB8IK\nIQxSa0eT9zew4aaVWoYxSaOKWU4DXzht5RFcU0H06PYRu5LfLI+gBVSKQN3w\nINpNooPjoWlVQuQPtkQ6YpQAjQQLEUeG6427pzqkmQTuS/9W1Uxay99vttFk\nRXDlS3cRCHE6Jw+Y39Fq43A6R0GZ2WyokYp7jIMDYYAYuvEGxmJu0jvrSqb1\nQaSArnsPEeTAOSbNXObflXRlFM3K9sefUBNL//66aLaUxRXnKHGPNOuqaGlV\noHZWxE6F+Xr+lbnA9IMfSS9WpT5o+IpaVfh3hk4km80w5WZtsnzCKlZaNpGm\niOXocluZ5WspXcJpNYKFuiEP59mu27blgpsfUK/nq6DoDRFOZHWJJ1Y00aYA\nreLvway3xWvbewceygVh47Rlh11/IlXr4BIMdKYutbsR1agvaux11qCMbK+b\n3cTGFn82lIBaeoel9c09QMkQJh2bvhDD5Udc9h5ZEMEAclnfjSr0cLBa9F+r\nvT+hkxqn1YAlOD4mKd6nWtw1IrQaRD7usuJVX9HhdiPfrzoTibUMJb9BfSeq\nDJB3m0nzg2uyX3G0CqOYhaSduk5Lvg1/2b60fJAsqm6E5rxDiTUdxkXe5ije\nAxEnNrwlAoj6EYppBr7X5CEHPDGxMwGrDbr6pysBABtJdjOoPWbRYbVwOVZA\nsAVy\r\n=l5TY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDavzIDEBpJCEc6Kdc0NBpe8HKe1v9PTPkiBY/DFYOZoAiEA9kY6/wGwgMsTrhjldiaou6bPkHOBVj6zy4HoXLBlBF0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.b7ae68ff.0_1598664426349_0.9272742537787446"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-button","version":"0.19.0-canary.697e3879.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.697e3879.0","@material/mwc-ripple":"0.19.0-canary.697e3879.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8U35OlN296zhkRgwXF+imFGnUh+Jbn/wxeGuaAsZi9A/3+cySSkep/DqjTWjOD0oVay99EMA0AJjW/41FtOKxw==","shasum":"2ab1599200c5b18a55b7b531070b7c8a026006c5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.697e3879.0.tgz","fileCount":20,"unpackedSize":77669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOXCRA9TVsSAnZWagAA4bYP/Asnu/rGBlSxWypgElUj\n+iEmnxQK6IjExkavmSipbXVlsMJoUGfvCM/NqJ75WcbhHIzbddH1mJKjJwJ0\ncz0VpzTcX/nv7ewAP9mb7LbocdKmNowcMd9kf6Bdp4DYDJKJd9pfvD8noD7L\nzLpXJNCZCJF45rK7TEn82v8DA7cgvnoOZVNqVEArFD7Z17qGs/iqRK7VN4Ph\nFqurbLq+TFlXMZg//kTKYJfPMV4DyceJMTo5Ik05uEdogQG2FfQJy9sC1VVI\nFKdzkfEMrJeS6SGzSmIwy3YnxlZ/sImUWOyUG45mfAg5hqbrUpw1OGwpEy0T\nXwzKbYD1JhVj/C9jjo0AoIO7LxjG4Y/H8cgPSSIvBH1Tb3iQw+DxtuA2dcoI\nyGGMIEBuKl0RnSaj+yY7zNswwVAsk2FkrgeLWXOLYHtmMJyC9v8uOvZSSpdp\nguPhyQtL2HNUAJS42NuT03hWvV8KxoCY0ymvEauYKl6JXV1K5oBkF4sQOwsm\nqHvOKESGCYRmWNj5mE7jfD9hsxy9OAUo7jyjS+xABRsxdTNQOfwTM7DjUlXx\nvrcU8mC3zxDGnyjMVm+6SNXy8Gg3zwVoyMCNk6mNBwg0iYtoZuK/UW3SVTJk\n9SjJYyChg80n5Ge2nG8XTZ0zYv7JXo5WAOxwzK1hvpaDfr9ot6JaFZ2h7yE/\nBmnl\r\n=baVD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCB87ONJ7ZRUQmPckLzwd0YOR7tvqOIktvQ3e5qfzvPtwIhAJ5YiT3x+Ivjhw61d0ngDk2wUSOY42UsPRN0WDNM0wfD"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.697e3879.0_1599005590602_0.5866685781893484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-button","version":"0.19.0-canary.eafb7991.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.eafb7991.0","@material/mwc-ripple":"0.19.0-canary.eafb7991.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-I74ddTYgxeq6j/H+MCszw0TpZOTjlc7+dwHc85jijYDHawJ0EjUcpKWEwXZ0j1Q+9pPvPUelRfm2MjO2CRppMA==","shasum":"102f8f0b408fce0aece0a4dde3d2c1dc26668be7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.eafb7991.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwDsCRA9TVsSAnZWagAAMPwP/1PnYRazZSaPb+iagGE0\nCl37HcgDkGZGkvHns774KIc6myEhL4dQs5MrHKM2iZiPrHYDhN1cno+JRdwF\nH79PnREMrbbBg30Vge0pDdIyQQAzBzNO57kGjv8aM6PKm0mgv2WXZySmQZ6M\nqR+uFWA3B5lgB/VX8DG63nVv5tF4S3+14N/yUg+CO74fbFO7scI3A7/nRzBF\nSVnOMsxerEg6lEeBi1WBCo/Lz9PcEatjWbJ4T8JJyNx2o09adyrRv/UkAJiv\nzL9nGLaO6dvZo6/lqiDAx3OhDbBvyerj1v4oicb4VaGndXZTr7b2yStIm5s6\nazwDh/VF0lLuQFwuohtVc1HeK52YK+umeSTOtPhsSgZBQY3oscSu1ygtL6zD\nehv8CBfrZ2Jl5U215a8d0TNu1nPniK6I/gxoyi3/JTm+LNNpKl7MLaCUb6r9\n8/ALEIVS8tM7cWIxAzLoKyiMARYonX3NnS5Mg6LOxJfvYaxgWMH8CJnfHK2S\nU/aZfn7ATOtWYhWdA7PqUdOsv1J8fgehx3scsG2wly+wL07n2wytj2lXDcam\n05LQtS2mygyPvt7HbHwUWRYZLeKdmtBZs9j+QkTyid9nELOTfcHzWHAzsS/W\nxWHt6D2RwYCRECyRXDhEx0nH/XGLYEBmO+16++8mYj4gvbVXvuzNqmxZyQXb\n+3LD\r\n=MYjn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGO3PJb/yo5Zo77FtjfAi9O1jd0RgVibCN4VISfCtVohAiEAn3YlJxSVlxf4qVJVZwMgUEk2U6Xz0AccSZTxUq7bNRg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.eafb7991.0_1599013099990_0.2806235288290846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-button","version":"0.19.0-canary.606642ec.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.606642ec.0","@material/mwc-ripple":"0.19.0-canary.606642ec.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-BBdflDIHL4TSkjYsC+65eU0JKcQSSwEQQrUWL1CHLnFIYAFM9Jg46eHLZrKsAOkX+pcz1vmNDhKzr054wi/N9A==","shasum":"fa1f399ec1a2ffc92bedcb0e554371e99d2b0fe9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.606642ec.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBAnCRA9TVsSAnZWagAAoxIQAKUD0ZNzd1L83zD4+obc\no4OgGSrQs0kfxNZrDvwZGXbBzWTLEPqzBtYmeYH93KDC8x5jQLrhEOffWafJ\nrLBiE4KD8yDwzoGI7liWtzLkF4/AyucDIPe0FFnvZ1BYv5tBGKIN5BaEWrNX\nJARJtf9L5fId+QnPUuTrzhIbVQSiCn5bcJNlaDi/xucaUL1OOu9eZiVTXh/i\nLg8k3CbklPXfU0+Y79fuwGNCRXmg7GdBvX15+LJSzZmxN7K5FAkhNCG59Uu0\nj8eKK1IJqa60j+xmDglBrZd6SYv35clHq2U6zFwJKlMBCvsGv9gsGQLTviVR\nzv3yQ2HqWiJOfeeouXqwPifyx02nxqmf8BGysnOaN49Q3RrXNltDeuYaVWkK\nYXdoi40AZ1TjrzAvTr+jPFamsbsBEED3nXtCYVRiUizBLWzfRhXdkOUMYgjs\nMman4PFMk/IXw5/Tb+qPH0woXRtdY0BlIBqSQXmTHDmLSsyw7DYs6IE+XB95\nNELjt9/pQmWZZ+/Xz59sWaMXJ33TaHFVBsokqdgzUWr23LGhFRbr7cGw+UCg\nJnkIp0Mw4w2Af3BMqNdCWNy1N4nwQ3ZL9GaoeIDzpz9cugzrKMK2GLAu13O9\nW2OjxKCCQMKR6RDBP0n1/xf7rSftx9hvzMxjv0XncFWnm1RH9fszLxqZOp/g\nZSLh\r\n=dWtd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNyoEvGMOVVXedXeEb3jfMY65llG72WL+mUZ05CKQ0vwIgceSFdBK2F1WQ9qT1VWKY1DdPva1OaYTIyiKy0jpF8z4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.606642ec.0_1599082534700_0.37629393108868947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-button","version":"0.19.0-canary.ddf05c42.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.ddf05c42.0","@material/mwc-ripple":"0.19.0-canary.ddf05c42.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HfFG4dd8UW7E0aJq4+dRDTdf3f7KSMbRGGsi5BWA0MwnMcoNLsgQ+1z6JqrPs9XoRIZ8qCI+DJeDIm9NMg2NAA==","shasum":"dca9d6a397f6a8ca4c7953fdfe04e57b3d9bd914","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.ddf05c42.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVCCRA9TVsSAnZWagAAuQcP/jjSBNogk9gBzCw0XQ08\ni7cfo5/8lq5mXCKJib5hf6gcNCeJoKG1SdzPJRJOQbalX6RSyGYRqCPiAXfk\nWyIwP6M8EqSifCZqcHk6OI+F9odNYJnCSUg6zqSuszzFDzM0UQ1i3HQFZ8Dh\n9Y3KChMhbbeao4i8sMdORk6e67tEge0hjAGUQSt1/nQJC/l+ZuEVF3TSvEMl\nS+kD/S7UAk3NxTGuKQIGKLDyElMUyQ6/7TFiIMWPX8qV0JPvuaUc8B8jzjoO\n+SUzJW1JlwPCTu8a/Ut5d60aUvnnmzaqdAYI+o9fu2F50EPCi8HNnIu5jOTi\nUbJlNf1sM7r0CSGm/aksWCMOAwVj4HT675N0m6Rvc7JXzMGjdVYfQECGofA1\ndyZ2b5lkZ/n3lCEJC5x5M4VcUbatlhajVZwHRmX04on1aKK38JsuTLNQAu+s\n0WUAMvV7xxC/U0AEj1m9629YalIKLMk6SePzUigeiDJyZqeFc/x5Qy6grfMX\nlnzaTAHASNF5NQGTonS0tiunOaYXU5NVNS2XK2fm3VUSjO8lsGX9qpoGu3n8\n4VAkC8KJWIXlodWUOyHqcxxreaARuRj1wXK/EQZUhfaI4x+virLc6FlNv14e\nEykBarIQSt1IkSULwv9Za2d0XrPzPzS6YqQnMHFAjyuM3zDwTwoBKDjwUJkD\naSkB\r\n=FI9y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+vm4EE/5whiltzeMcDe8/cDRoO04IRSC/F8Xhh0ujGAiBb9cdw2xlEgLOgiFQomjuV4vpgktHkBeoK9z6TD1WIoA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.ddf05c42.0_1599141186563_0.5198258858650853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-button","version":"0.19.0-canary.b889e6dc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.b889e6dc.0","@material/mwc-ripple":"0.19.0-canary.b889e6dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2uiZjAoSkEmxJRo+7qOSyLrGiP3Sgt83Lle9EfEsMDY3Yeq1ZffCQ9QO6pZKdgcuhwsu1gmZtarjC4tX2KsT9A==","shasum":"8eb94d09871460ab506ebd90a01872ecdb01e4cb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.b889e6dc.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmACRA9TVsSAnZWagAAcqAP/39d/MOHxQuZXvuikr4R\nqypEk4hxqkdOVLniJNvd/mYRWXm4bEhhy4nyLSWoE+YMiToh4mEYz7QJ4ZRQ\nXuDosAFBq8AhAgw4mTQVWF5vFZx19au+EpfEE5mTgkl0rtmWTKDD6bpHSCSK\nxGrLD6fRPwj5dFxUldGArBAXuImrrm9MQytmdNKdrRI5njWeSiIGIUq5t2AI\n7peHCp8gv0oF3q8MprvgGBnkay6Z7+kvmyRLOf/a0Nuwk+NaTooj64/A7Qn1\nCnio7HwmZzepzpEx5jDVndRpSCQASQIvMhJt3R9nvYpdLxN+1+nf9xgkM948\n0obN3l7/ORZLIww/9OA6KLGCpKC0jWlJ6CgmPUiCdbMfJa4b6HzSBgTQ2ldM\nt6hmCglwFyv/UTrX1NOaJXC6Bn9lqRqnmB8aZssaJ3Hu3HuJEbPslvajSOVI\nk5bv3xzWG8ROIEMV1u3C6EOjYkfjKF7Y5xMpsMRMHt8Kq8KI9ywSiByBdxqS\n8/Ixlh778Q+dpVybBAvgB8bI4kZCy9OCjdYEPLQsFYMoEO3vPwEOyjHEnRHS\nhqCb1Z/MSThnXTxbdgVAEi7x9ESokr2wC93hyOms0SKKg+qnKajJQNgDM+7n\n7ol/6eecDyMhWyea+fklyc7MY2bwo7cqEmDZoQDEV7L2Q4x91dDzObFH8kv+\nZT9X\r\n=2OXA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbp8RBUCsszQn64wWIMBeP0vaShTPJR5mEV7uMcyjZSAiAoP4X8AI0ULhQdzTO07GYX4mCRzuWukAbAxOdYoCQZqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.b889e6dc.0_1599142271989_0.573600203407769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-button","version":"0.19.0-canary.aabeceb0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.aabeceb0.0","@material/mwc-ripple":"0.19.0-canary.aabeceb0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-a1wkQ15yR0Vr7XyMWi7kJN1LVTi/KWbguJZcxhF7s7lH71YQnm0gWEaS7Mye61TbxjhvkJFtjSemg5xzPSWaxg==","shasum":"1c335e179b7f5a97eba2199c88ae59ba2eb17341","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.aabeceb0.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUquCRA9TVsSAnZWagAAC9oP+wWQ+8jsXd5BI+8ZYzlU\nuJRDQFH3rvB57R25R2kqiq/7IC+2AnebRltB+lo3x9SuwA3XK4Emfcu9HaZ2\np8YmIWkcB2wC/CSnk6lVdHIvEJ+6sePVenBMUp6KERS1dSteV1p6mqebv5Nl\nnr/8OqH9rw79quE2/9y5ueznPc88QIW7TFHgHmUkpVCUnElkmCnGivmRBm7W\nw+PM5kIUTJqd0eGyMFjxTE7EMgZVFOIAVxAYnfAGbQ1qxdWriW4Y5u8DdQ/N\nGqvr/XlCnvdRjgHQ0//jiMHGdxSZRZUObZLQ6n0vpyzLdpATWn76soDQTIvk\nJ11+7D4jFAaDnp5pqm7Lwkn45OCxMLaOFc6u90pEkwrhmnNZiEYcnQsUFeof\n6a9kO6xc1yQkr9B2av2XcveTqOsfLGMerlQpMvKZxUhtyEpF4Ky3dnHLiTyc\nGOntWe0PzNzipUmihVQ7lwW/w0ALNAVzCdf/1yv4K0d5EAaXr5ALnJ/dexqb\n51vIiLttxUvOK6pdYwp87DlYq9+wScARsvXxzacbcF3AKnO3ZrZnjtNE/qvP\nr6SY5DOMb4xZSfiPXigyShqNPsmpdfwKVsz5AUaWnApuBZY49Gh3DgE5FsDI\neMSnZq3CL9hfOhAjYckiAGklOCN3aeGKj59IkaluMVz/zRRKM5p5Sa6L1z5Q\nGchY\r\n=0sEq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTjakWQ1SS1/qM1QrhAE9eHgAwgJhcmHbyW17Q6BAiwAIgdL0eTNGjnxKhIdj5Mebwcd6QyeY6CaVKs84ziNlAzQY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.aabeceb0.0_1599163054259_0.33747838244721184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-button","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.d8cca3a6.0","@material/mwc-ripple":"0.19.0-canary.d8cca3a6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.911014711.0","@material/elevation":"=8.0.0-canary.911014711.0","@material/ripple":"=8.0.0-canary.911014711.0","@material/shape":"=8.0.0-canary.911014711.0","@material/theme":"=8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-02WHggi2tnilRF1nTdKcQ+dEPN2PVMcDvkdErLWmW+CWQs82+neIk2zSCp59EKn6Vtfiz2vITvxp/eO/mvwOSw==","shasum":"c86eab60e6ca8c53124c477e391742eb1c957f8a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.d8cca3a6.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWC2CRA9TVsSAnZWagAAJ4wQAJw+jj1CX5nQDsUPt3VB\nHE4EDdULJuZwc9nC6N4l8440in4MJg9sOFuhNN7L1c0fbCANQznfFybW8KFC\nbLZmc+j2bmZwRbDo0yOtIay+GSVaoaZXetbb0+jsIKk7aJUfPMeeCXQ2t3lG\nRQHwxqpcKenn4gYKvCT2pobbib8+/euP7VkFNJDvUmfYsSfAELOpUaUoHKKk\nx5Jn2xzoMQRzDTlftbOOBJNxs7Lj+zYIcOV+zeGclXeFSvSBvUrnmOG8Y60r\ntIEE4qytm7FGB1C6N+1E9hRaR0c1xg39xxy2/dR5F9fbJNul2DreMEt28zCQ\n6mbDXlwGWvu/G1WBLkaXj+zZdg9SPQh15MXXA2XsVtwH7hXxo6kgzfmquTAJ\nIAav3qkS0VLsoHyZeQHJEGO6ZgfvtEn4eCP4PzMnld4cYZGri47oK5w5EvyU\nLSGF0bm9zzT6uWnSMuNQ5SvrHaHAWbdcqufZ2KCEFf4sSWOZ9ZA3oGc970N1\n3L5qxn4wzILBufAfG8J6qtUZe4ICAIg0h03VsqoQD3coKfuqgI/6UTJsuIpB\npRFEFb2VtZVpaONpdl1wqW399TtQDM4oOK+FFPk1SplVVB8TKnqRnLTtkenW\nPk8zcZ3Ec4xbSI49IguHqhILX671lIvpG6mfWRH6koYFUaMk7liuf356ARL/\nHpx7\r\n=4x06\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjN0bm+d2JswIu0avspGbqQpAtvbuaDd56GFjpjckOFQIgGSnVTaN1M41KrbeMr+gx4p3lFtKp8ihga3xEwGegUj0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.d8cca3a6.0_1599168693707_0.9896241429284722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-button","version":"0.19.0-canary.26d34b2e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.26d34b2e.0","@material/mwc-ripple":"0.19.0-canary.26d34b2e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GT2Q24SP+RilkclmOZlFCefoE340ap/RuJbt0AGL0S/mk/1+6owc+wdhnD0/f0TnK5YUrsQJHbouZGVvQsVt3Q==","shasum":"5f5a1307762e1c93ccd5824154ad6280ecc59657","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.26d34b2e.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWalCRA9TVsSAnZWagAANbIP/3OTi7wpC9KL5h9lsvSY\nt7JXx+Xi1ewLuNdWppBwU6Z54FobYgfviTw+382OulW+DdeKvQR6AwmmzzC5\ntVj2PEaFZI4po+/8fY3TGEG1bKHGELxthRWIEaBwEF7k43/UcgDXoJSCvNqa\nnWNagiFt/88K7Eqm6QPEyl0QzvqNHUM2WISe1aWHngIhIxOBxqIuSDlZFt3D\nz+FigtqWKjaJ6wINUSaarMxBQtRCz2THIyMa20MFH9LCVKCq10MR7YaZhle2\nNzxaA7+cEmbklvSabOpVjsq1xOqx6TriV9dvgYMTtbpAbX2cC/4CiwdIH3RX\nB2LaN5qMeGUkdeYLu1Fr0QUZB2btIyk/x67qdOQXwL2mq3bBUr2kgs/wdScE\ni8ZZ9YN2PQcwCq8GWNaZHsdFYXMMp94tE8n4NGf2a9UtxMNS+rHG6tOev71J\nO86+M2upgROf654NAecZXLF3bHrr9Rt37I7I/qPBcR1sAS6G/QlLF/EUFaDW\njB6/bJUsLzPfjH0ABev+NdDcPAr+8mxXenztOo/4XHRndkXCRQLpUkOsR8Du\n/Jm6yQkrG80RNyax51NshaExA/+4ebpmKM4F8bQcN0NEdiVVNlzaVTQ/IFFv\nEeALtEEVnzwA7vj05mOOigyxhI/8ZzkRPIYNM9n3e7ZEdgZwB2fhSUnDJ2uF\nMJ5l\r\n=OHWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGbY0ebpR5Wi2q0I/mzLWus5xq259ZSYegS7hlIqy6+wIgQrv5d0G+3z/Bt9M/V1ZuYQ7JsurqUUxj6gOoZfDW/fM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.26d34b2e.0_1599170212741_0.8153578334675404"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-button","version":"0.19.0-canary.a1c44494.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.a1c44494.0","@material/mwc-ripple":"0.19.0-canary.a1c44494.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XCrGB+CYovcJ8G9OZeW3CWoubdbw3AWAKI8fCNYK7svyjAROu4nZO6HksgEMFQ9ltOUExvfapc15quzXCW4EmQ==","shasum":"b9eadd1290d0d8fb2841db111c2d466cbfd6a018","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.a1c44494.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVIpCRA9TVsSAnZWagAAU1AP/j1Wgppigbd9kDfTmGMq\nwmIE5QP6BhguCnPlvZ/mzodK14YXpmIuBFEDt/RnEdQTb2gzUy2UMHJey9gg\nzabEKpj12HGrMwVuPHExsOYUTzCdWJtaee+KowxOOAr7f+CXnZv3ZTdrTvNl\nBnIv6bIggIh097hj29valIIxWTgapQCyq+uEN0Btr4XkruVcsKuqtuudCPsi\ndpOag8BK3dHMEPtTkRJw65POLFPXqHVMnQZ150c3MEsiOFVYA6s+EcZYSrpy\n5TXfw6sdwsHXKd2VSM+/TsEKFlK5NP6fdK/3Pa73jIerqURNZ2WMsiVQXAvE\nmHAVtoOur62wnSpe9VPa5X8PPDsy/M+I31Fv2+S52Toj7Ig1Ft6WLBseEr1Y\nVf1hADEYozNabKiMvLRul88vZ2I23fl3iN6ZXpYo4oKIHjhOvhb16YHnCMtQ\nZqgFTZl2aSludoBUXHGwhCJTYE05GadCg/hZe6nrLBlBKfD21XytTPeUqdML\nMrvgwdB7rbVRLVgIfoOmrU6osAHMmGhxAidkXMa0ZsI8UlCOei01FCa8DqT+\nOO4DRX2NP/JcnTuoQEXbD7BDGMIslrUCich7K2snv6ocKUMAz9mAUGWXOFSt\npw1O0vWr0D45NDQsHBYf/naiBZ6wNt94sm4l1dkHb52j3pmlXO4yQZ09oWyj\njDv2\r\n=Hsof\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnBE/TZtC5UvMqMTRYhVF4FCA96f2X+wT4MDQhXHlJSAiEAh+AkCaLfhSY9Mv67UoHAOVCK6bVi19JrjUJHgvOi1No="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.a1c44494.0_1599689256695_0.9209479538998726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-button","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.be1cd1e9.0","@material/mwc-ripple":"0.19.0-canary.be1cd1e9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tp4/fn0JOBHqvri3xqgbkyJ8qwKBuhHAd3mF0hktk0qAZFrqDpfSC3WQLgRffefx7vAbsQWThm6Ij7VmiDBTGA==","shasum":"65d0cdb19a2ef5aa5530157f7186fdabf312ea86","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.be1cd1e9.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlchCRA9TVsSAnZWagAA4csQAIQ+QWjxy6wL0hWvjydR\nTHh5KrwuaPfaW+VpXzO5qijILrxCQfsybVKDTgx+NQZpgRVCgoIuUyFELZyj\n/XTsFw1KjC7BDN9IXpco09RV/MuDSLPhdrnX6MwZD+HnNCyokfm51H3knIJI\np8thmw8QpQTERvkgt6nAcMqDxsoik+PeclY2TU1FX2wTK2dx3usawa2R8d/o\nI1LEonRgzV73Tsb6pDAfSs3KFYKZ1cShdeKmWaiv5fnWo/aLKDQUL+Cii/TB\nvztpwVp1OairMXn+QNOel0p37+SdfxAsV6oDPFAKr7Dhh1rrWz0ybVA2r39O\n1L+PXeV8VFznxfki1vkBpiTQeCfMQQNEFeLlhQk83drc7Khe9bW9gk28oQdi\njmQac1bMRq1jI0PfQnVr7totF6vVB9kShEAa8sUrD9gY06BO1eq5XUH34UNh\nCvZAIRsdAhu2Z8X7PM5Ri8XgTjTFSYqKUQoT5AzVsafU7WfkRbTE9hm/hEFV\nQ7EuhiqiyGqfEurM126LCAsGZh/nahBEptds+ERTjjs8cUltGItTVFcm/9Aa\nomybflsE0jzNomoVZIVaiMzXJvcSHgaGmmAgwX+jgE+JIHp5Pj42sV5XTaUt\nPV9eBe4CzVWFxzzA3/CLLU4dfa3NkcC4se2gYvQCQbot7kxxX3vLHoiu4PKJ\n2IjS\r\n=nPKN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHRjBaNrOfnuOkRn2s8eYEUdDakcKwcmAJ9Tb5/nNxvAIgV3otdAb9S+rqbJADiqeQSUG7ZjhIDa3dIJsr3+m4fro="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.be1cd1e9.0_1599756065289_0.49558142410852546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-button","version":"0.19.0-canary.f094c0ce.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.f094c0ce.0","@material/mwc-ripple":"0.19.0-canary.f094c0ce.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-O6RTs/Y69pTBm0wSbZLHScK2KlfkxpOk4x1FXagNMebPYe07IS/XEKehR8mQEsyduoDmx+qEHalnGkQcJ5kJlA==","shasum":"1f7f7a28cd311c65fa356b9fe5dea47acbc0f275","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.f094c0ce.0.tgz","fileCount":20,"unpackedSize":77599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQPCRA9TVsSAnZWagAAQJ4P/1estZ6BsbZpmo40FIWb\nKD/u8Z8YE0TXE2NGfbYp4G58XFaGruj1ZsudT7JmAUQRxhLmX5Hqu21Khas1\nkNz+0Bz5jVLF5cF2Ngc2jqndHiW6yxD7QXYhHaJY4csunDzX0L2JJ6/GrEi6\nlAcIFg/7s7oRjdRpraW74CXZmhvjOIhj2OZGmPDm5xX8OytL44MuEgL40j6y\n77cDSfuRdx4H3vbmXTvAFX+iZyP+Jm9COQssImgq9zOZUqTLKmyo3JL9PSw6\nXxciHSQXC/Pu7WsCVzRuNF7db9EOUh0BML6v/hCPUBpRsMOCtuoLPGNiGZq4\nzQL2TQwqSfgiNe/jnY0ZhhBNMoKCaAJk9WJ81D/WRAk2RybbnqwoVYVXuGxB\nVibHSwUTCS0okXrZgCrsavxrANNzPS3uRwXRU/BkovO6v+hyyScqNcbX0TpB\nFxInONci+fJWh6c5LXA6627XbAACI2Xo98dGx0PYHBgu8kmV+muSYxh+FAqS\nuouByoFjAdkdhccwN6Js/UPUg7NcU65Vb15tY2d1RYkR2/RH8q4PN3aMQkv9\nQP4oXMDjd/v3NekGmyKUdHz0jSLheAgQksE1910ohmDJCoRMVqwR+rBLcqb+\nAiUs9cIekkPZhrXHR0whM5ZJYjjHvEc0pk9H078YkoOzmceEuk2gmer9vpqR\nQ+dq\r\n=EdKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7s5b9PiAdpclv+SuyWmktiZXlFr0GzMjVISj4Y4UC8wIgTlT99wih/fepAyXQUupJkJTwpTnxEFJ+E5c9nl5LifA="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.f094c0ce.0_1599759374600_0.09586376910175654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-button","version":"0.19.0-canary.c1261e7d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.c1261e7d.0","@material/mwc-ripple":"0.19.0-canary.c1261e7d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GVFhTwOW5o5Z5NqTcApiMkJw6xlKPdh8HLnk4ghLjAIhacU1IYGjEexqRRGVE58UqRi/O0nT2Ly+Z1I95qDC+A==","shasum":"98b9a7d7551ec99ce74950ed524e7199f6b50fc1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.c1261e7d.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBJCRA9TVsSAnZWagAA92UQAJM2X9uTTMTmfyuvjX/p\nG8neygrTdfLqJEXcMAHhn4MlIeUZ4dQppu3BvjjwCSi+d3g3dgHiApQtupo2\n5760XCoChiOiuOnSp0f7bCPdCI6x832nGMTloac5mYw7F3aQYfBGkEBzDNW5\n8h9TBdsxt8knCBCOlmTrxGXJpa2vnFVU2LnGALTBYTtFEv5YRWpUybVY1s1b\nSx9HojCdWPhNQM1l+MJuwTTu+/f/Cdz1hwaptgan8fC9u5RFaIJ6nXpipcoJ\n24aGV49p9qwlPxRom+he5bCLk11juE+ggYk6lJXGdjA4i3ZzDJ8G96juqsDi\npsDCwUyAppgLYBMHCTZJDa+naoK6NI7MeAPh1yN/dDF31Jbmcdo34DxUHYAO\n6PTuVWZVP//iqSwg0VWWHhrQSTeE61vpvdFtsHQOCnJIxnRdxXlgGDz/D4nP\n1vfKs9afDv4GI5UXtVuu4S7iEL7AKkzmpqSAXvldTEM7HMBRlgG2SrcUYdc0\n3oUZmS5Ih98XaAdgoegVkRpkufR2nkdclKFq5w0CyWpB8//lLHRXZONFflfO\nPHReGRRopY3enQBuMbbh1V/MtH+jtTz/XQHkGnWgxEN0oBc8pZgh3BzEm4Vb\n7L1lVu48pm9V8cbJECypRNnJPQ9fD5CiTryD+9eGhSHVX9fiicaOfXx9sYHe\n4E9C\r\n=3TvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4bnxRwirQve0+GwiiIXTfoSoRo5/BjPjeKKCD5Ywa+gIgQj0HvuDZF1mnPPMGhHXoMv6CFCuw8jKWWhhfOwE3tBI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.c1261e7d.0_1599791177130_0.65781205650228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9b39ed1e.0","@material/mwc-ripple":"0.19.0-canary.9b39ed1e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CuBu+mSJJxOrqvKgLtn1MV7AUm2Wf7SIbImhEC3qlM29Vwz7q3cpBh3Vq9bGe1yEzdHsRDTxxYVDBaTdPJk8uA==","shasum":"1a5da4c337e1bc47ad7ed6124013bbae4c6a39cf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9b39ed1e.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCBCRA9TVsSAnZWagAAZboP/jODUMIONL7JrM+iL/AM\nCkTyAUwLgOMtvA1Ad5JLd91uCXnUKGVC34YGkSKrb2hKhbtooST9GTrl6o4Y\nB5rbGqHJfDlw8AuuY4GFDKaNxEM5khMqt1I72CpLvC2LPFAwXVUMkvdvJAXb\nij10A22VygPCXgcEAvtPXdXsJ8v6BPkjB3ZBPEPK0YQLU4mc2N1flEt0i2mz\n1/TZwddf/F+QKsUvOqgzsqDezEmDct2a3tq8NvSj8rw/nd1RgEoiAK6SYZyX\n+fFumDJb6P0LMEmB/RaLt+Rs8HQLSIjm67aovxqLPXn9Ne9onKsg/ldPu8pH\nc6Xz5PAx2iXo4ZvIzPQWmfDTYda2fZ9xtYRDRp4EDgz3wT7d7KHDMLsogFwX\nWSSLariqwqy5OxUoB4BRQ03dBhA+UmxUDdoru8jeT5QgWkiLRlQ6RrkRZIRq\n9n7W2WvjtD7wLIizWhvxJieF/OLeA7nFhriGdG6aImJeRpl+t68TjCZl5XQT\ncLehmqriVqnP3+swNn0ul98EpnVqNrEN3kbWrAXpCXWfoG4uYSU87ySDnZyt\nQOrS0NdAfJmsnCccC9lVuZL3sNTPVpW9rGB4CSjiDDAH2zy5ENlj8QwhHTyV\n32/zDVI28c8xPpMXDujwAUdN4yD+mdFFg5j0xPalGcO9j7/vCnWX6iaZhHvU\nh2Zr\r\n=nxM6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcwgybOAdK5ckv5Gtp3vv6zpqFUeqqtjUKNotFeRWQ7AiB1jjuE4d07ekpFmZKan9OxoIWBtSTGweT4SAJnqbqblg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9b39ed1e.0_1599791232996_0.061229619368872834"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-button","version":"0.19.0-canary.e67214b3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.e67214b3.0","@material/mwc-ripple":"0.19.0-canary.e67214b3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uJtvOoh/57QBXDqSRueBkDcHbzfeJG6x+4v3GytoqKCvckUYUi6ilPClGm0+pX/rEylEWCHbROYF2YfkpRlyrw==","shasum":"3c77ea7156008fa9f8e65a1b2673cc967d3645bb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.e67214b3.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGDCRA9TVsSAnZWagAARnYP/ii6BlnxDRRYXnaNcJh2\ndWirUncI+Mp5Ik4LFKiIZSm6AMUXyuDn4996S0G/MSQmgJI3PycPH6SuyDMI\nQPufGZn2EQohwjKhjX2rjlBOizYLuz6Rgs1nRRC1F4nc+F9FeMH2CuEuUNAS\nfBjog2fcEJSAyZ5jbHDDlP3E/zNhoQYb4NOF9+PzRCxpsR3lmFsL0vvqtwBx\nGBZDIg+TyMhBExvnpzt7GCDmhxEFdL3awfhgH8avZFyz4uTtamd5J8fxHAkb\nuD0mtzlS/JkpmQ2nDTiE7A5NkezpemPlNtsKR6PFd/MA/VvVOC9gKMxH3KoM\nnnNulMUO2odgjC+e7XDzeDjPtGQsLvaw6BroF08IpyHGypfWgJJCcnwXvGCg\n0t9a2bfe1lSOSU0gzm6RQoh4yMWLptGHQwRTDMMqhP+DrOJ12UoeJNCmkC+6\ntrIjenn80IjMxeNqtZXvCQnQNMI41c+qViLXgzFMg0dOse376ZG/YlviTF9m\nGBe8HNUqZjgQq/8A3eiNMHBN1aB5QGbrmOf8Z4SUumR9GSheEQ3WLRD3QkUH\nEXRPDC5I/s3wwiPiF6QYInzlOsbdN+Qhpc6g72CXWovFzBioh7ycoCq1FHG2\nw42wT3SXvXAo29U0VKjx7QNZtgBN2PpeYSQISwEf/qlluk00yd7w9pvxmVKg\nUCX6\r\n=lus3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO0j+dQ3Rih5vS4MXjiEj+KreLpMfZBReUgo3VjScRvgIgB0ikApgCrugt1Gz400743INiJo2dWJe+XxxhZ2/TaX4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.e67214b3.0_1599791491302_0.18409837704183474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-button","version":"0.19.0-canary.36f5da28.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.36f5da28.0","@material/mwc-ripple":"0.19.0-canary.36f5da28.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X4x/MXeYtN78QU8rrFvivu93PFxf7N6cuRA8Cfghou660cZh/mXblONUQDUjT4azdX2tKfLxuxez+YDkXQOMQQ==","shasum":"3122715622050f431cd8aeae8e0f8cdd7c7180fe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.36f5da28.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuIlCRA9TVsSAnZWagAAOFIP+wa27J5brbzyUqZ1q4a1\nl9e7hZxbSHMzIqFgxrIqQoe8a/pgbbwv6wab0ax/RhHjbFUunJOOBpR+12Ip\nLWXB1DDLIv6BM6rrQ7XbYUXRc10+JufQlrPDtNrNofszfNSlgm53gzv5RChH\nFpFfZ34nUCF0WdtgeYZ75H/HDcFWdaN6MkiCV5aHsvLR0O4xB+fzCBPRG0wb\nb52jH2LOKhCncB5i0GCVeqnRmbHOdCR9ouAE886XpPDShFNQVod6N65fw1QI\nUMkcv9yJiOhHbPZmGobc9ie9Tv7Uwitv3J2oWckBZbS4FLDw9uBi+1vKVT/+\nyLehmyLrJH4bzjuJOEaeQ7JeB03dpVgOr6gRxpEN7DwNhk4cNenR1jbgVrND\nkPJH+EQcpEtDvZpDZgs9JXLExsI5vuWRHS+PVLr4wLC1+HO9ceB12or4r0rs\ner0HG8yjBXcTtZBkhwlG1L8h+nHoZW1LJyVeeMoQ4C9JD/PMBQLmgEt971k0\ntRuUr+hhFqjVXiFkYs81ZhZpWoIi3obQzvOQIpAEoEEfKqKt/NKblNQecg2Y\n96+MgzQnHmvvey6hADa7mIs88PEt42T4UpwM4LrdsBMYMK+fta1f9OBlGy+j\n/7rt/PzsqbAWbgORKVR0uvZ4mIdA4vWSC/tKBZm7ux9BMSRV3R4A34ohJEUU\nrFJ8\r\n=9fxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjdGY1bnuOABEHLsSVcAN3JWGaTuxGq8a/ZfIcvkqysAIhAOqJV2LIDsvJTfBOQKXj1UKrktNBNsD2HM2AZZyUXJif"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.36f5da28.0_1599791652740_0.7151974327487292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-button","version":"0.19.0-canary.3babab12.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.3babab12.0","@material/mwc-ripple":"0.19.0-canary.3babab12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yjla+uMhk2YSpYfzvj/PAmzC34wfhKKrxMvPGxmqiOb0BSga011lv4SkBwLF5qM0A8JPeq1k80zxM8sCQcOeCg==","shasum":"6f0687387faa3249490e0b2724f3fa516a17e8c8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.3babab12.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLUCRA9TVsSAnZWagAAji4P/RhcvrCLv6Njb/9u80b2\n+jZjH21dLR4cdD7FPMpOx4z7yAvRX9omJ60+Ncs98A+7KRT2SEPRkrrcO7gt\n2dY8TkbDrFb4c6qlNIqqIx/+CJeLXFVFMmc+LSBIpiihFb1Xkjy5YTnsOwz1\nfPvOQ6C7eA5ZlRq9FNbc72LU4CjE51vZB5nnZRqWZQ0BJqN8DnW04k312oQR\nYf9GGFzbUAQxJzqdNQNYR8psDUJKNgpY9nsSyGovGOgSRx5fciL9I0JIFBv/\nUSw31LwiLNhBJo8cz9MQYrNsLfSM/JTYtPw3WTI0yFEFpyqT9ERsFx9gCTib\nESLYKBeZTc4d5Dl/YbOFoU63EBO7Pp8WxfZhW319IQKs0qx2TL+5Nw0qJdkg\nENLI6yfSgAo2+7n2mWyEZIYHv0dte7REvHXvJNLR9JT1teyxiPFfGiSl2OxB\n5IwjEgUm6iDUaqcgCog65Jq7FRDISn/sSehsZ0uppDdXXm5d83rER+ep2pKJ\nv1CZYFjnP1mYu0LnR9x8xrslJToORj1HeGK1QJojkr42lkel/wQAiPbVqo6R\nJ2fw+s9koM77K2EjeAa3hLjkOPuY6j0IOzFK+cCU25h4dodyc3Rq3FDxWm9E\nQ1l8clCLZBr/Zfu9OFkZ5ulGnGp42A9UN6A68YQm36NJSPxmWH04YR5+UyTo\nmgPN\r\n=TjAV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDgra6dpVarXCYE2qHy9ig2cXTN5doCCYbPw2IDrkV7XAiEAj4VtTnMkQeaTW+87c5Ynn6CjEh/uBHvlZaBEzl952fM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.3babab12.0_1599791828071_0.633149977255014"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-button","version":"0.19.0-canary.a4481e6f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.a4481e6f.0","@material/mwc-ripple":"0.19.0-canary.a4481e6f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sVMQPFEIUHOzTLajxf7gHqTo+RC20N4PVsd/+E+X6ymBAS5SgmbfRImv+zhOUkGUhZtYccRqpNBtg2tF+FGMjQ==","shasum":"9b11efec91b07a37575b77712db25a3478a05f3b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.a4481e6f.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuWwCRA9TVsSAnZWagAALUkP/iTyvuCWjnDffcrXKn+5\nxtScEF1Ae4csUkZfuouR3nRYoqhE1SxY23bWvef2h8tYhm4z4M/xwluzCcEX\n0sbBSazqPsQY6p27pvx/fNR0icsINY8NAgNAraMnmQGV9ImrnmgiexbO151f\nwcAtFhdB6TCjhIGMTalv+dLsZFGIRZkekJ34kRBGKSvngI6CaZnbB7Dmk1Xa\no1MHngIj1FvUYQ0fmwK2qLUNUD8+1HFXjPf0mSKthqI9ETw8TpM4c9IeUCUx\nNh2ZVrob9wzt4a/dhvAlorfnQb6nA8cn8qu2fbWBWWVs/hcWEP75FRPWBqom\nW8laBgMqt0K+mgXs2X689g8RaU+HMdKKXxYaQCFfPRZDkKcwjBzR1Kn4xLEN\nDS3Ax4ob8DR/Dyc3N1H7Vf9reN2u5Gi5xZajh+hpuWBGnStyeWqmOJs7CQEB\nsC1wIju/pvtmz9j8ZuXfisyPkyWY9fDer3Ia0N9oWh2WVgX+eBOWFMpEKzVw\nWDn4/ukFIXCreRqchSWnRQBTMWdCjiy6R9fXA8mMqsYI6aCe+OocTgfRhlzv\n9caf79PdoK3RQRPsH/WPdi+SpXCe4YMXWrUM8oO2SHDqnKOcz1sXvihKs3yy\nS6OtPYJcJrN29pM49dwbO6tgZ9IQGHNWUDQsAHKNaInT2H/mFTh5e2hnFmp8\nfpfe\r\n=5A92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsKOkayMap5XtXKGkd/kK10FeQy0NRc1cQodDDUlA+8AIhAJdzTTXH0NPtdCqkDuGIWgQR3U1f+GPFEOd91OMWM7B+"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.a4481e6f.0_1599792560355_0.8477634021604004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-button","version":"0.19.0-canary.a9177836.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.a9177836.0","@material/mwc-ripple":"0.19.0-canary.a9177836.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.744bfe5d8.0","@material/elevation":"=8.0.0-canary.744bfe5d8.0","@material/ripple":"=8.0.0-canary.744bfe5d8.0","@material/shape":"=8.0.0-canary.744bfe5d8.0","@material/theme":"=8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UHH8lhTA57oWa5uUbx4bvvmXrSkx12jKy2QupiSKCivvqzN/jX/ya5lBEYuUZ5CW9L7CCe0w/hSGxnrRaSZ61g==","shasum":"37d41e8642bd0b5792a00449ba029e67c77bb922","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.a9177836.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7gwCRA9TVsSAnZWagAAX48P/0vTuxOqY3vv6jGWjTEn\nMhb1O4HhgmM9zwknpFRS7FieE7U1b9kUxcEzgagBdmoKRyXX24IfQy1ZPxp2\nOqpWoX6KsUPp3dF70zXXSTyugOs0QNNj0+wmS81a3QGAA6lw7h9h7Zk/cCou\nH5GMWejzcrB5wSwmPsHUhjEMNVZNso9AKgMlbbBrfX7Espw3EwJErxynctut\nf9N0Plo5gYRAMuTpqJtbMSLWAtrMqtqVYA0NsB5HK3ib8h4v5tpaBqWE9x1s\n4F1449wlzVwHfhz6ds1kHyZ0SnV8g6UF9ueTTap4qYXxQmTyh8sDxROc/7+I\n4rySk8mjWLLqmKY7zgKsTwINZLrQOP6lQtzCT7dY4YBnLuv02OEXqBOmFwkZ\nQNid7PEcRYalQtDb6DKfxGeCb2BIy7lxq4wim/KIa3WKHAu2A1x0wUs7Q8R/\nmUdNbgYwRmwW/QJmlHHmBXq1TKmidoLbIvVFddQV4MLhVWPODUDVTdfIkh4C\ndlg3oqFn0iDTimvTsfzlg+TJ7gmDWosMfbUPnt3apgAVKV48iGbYWcYXcULJ\nK6yp2vBhqEef7IIeyTLJxgL+4pfA4jC0s84PBwDl1kwQj9zXnEWUcN4poHa0\nFT78++lwN3syISfsQL/KigoANVqYHHNsdhkHhnp+DYBdDIJ2i90YRGMFFjt5\ncX25\r\n=cKwu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUyd95lSfz+l4+fwr71E9FaPfuas+r73fTML0wsTE3pgIgDIL26kyg4r7qnsib7RIl7tbYh6/9TbdirOjKpUioZoc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.a9177836.0_1599846447902_0.01315641124496536"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-button","version":"0.19.0-canary.b102a3c8.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.b102a3c8.0","@material/mwc-ripple":"0.19.0-canary.b102a3c8.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0onea/gWOqTS508SHeGEY00Ax5zeRsSdSf2lD4U0ZUREAwvyP8Y7BV1HHc2wjAlN779DZ91++W6htdAChABqjg==","shasum":"ed2d5f6bd1f13a6a3d2cbb366e19c458251f1e47","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.b102a3c8.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87eCRA9TVsSAnZWagAADW0P/3cKfk90f0ybHtMlSLSF\n9bk9MT2C6GH1tb5785z3/TSyO8B+8TRpJtXS8wj06y75gBKnmPYTl+f42LaD\ngKDy0RvklOPMv7cJnYIqPqHS75LuA3tuZFxORLxtHa36ODi/3vcLlYVQFrGT\nDDEkabHewHcjF/i9Xc8kxOJM2go145UZ6VZ/Whj8qbRhcBv/9nrgGOykKc4K\n9qYXr/RBzoLaLL7BN1GNapE9moUnqBTtKFHGqw0/1CNknu4+53f8yHt+0Ozg\nJwPx2iaPeLl8vBnxYAycRohdNwPKJP7NDvaLpf4OFurbhv9vpdZKp7EWpwPq\nGHPsD3BAQ9szFvvH2IaUZnq4Z65Aea0W1w7bDo45aXqqAB2brEdTCGQj8AaT\nxakjpCJfMMvS3Rm7ozTsQAKcrlVCxEAD1RaGhHMfXESOu10k68BbCVQN1JRo\nN5Q+xOZYuCBwnM4lJSt16QtH5VM+RU6vpqb3/c0FfY3gI9aDWsQMJClnoHPX\n4zcPmx1Nnc6wy2ZLHgPdboPTGvuyxZdZfNIBg/RS9KOlm2uZ9qSU0GcV9ydd\nLi6Y/tG6IPBiFoXJrqMswy/K3EVx5Itn1ZWwQATBdvsOPLiRsaScT+taA8vi\nlCM8XbnE2Rjctwdr4puDRWBV0PZLOcG4ebNQeVMkQdBNakVqHPJUblVw1fkg\nux+P\r\n=GPk1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPx6p+jxXRZQbswp50Qhm/B7e4IC7Aa8CgpLGZzCVvhgIhAPt8JcA0x6DbA/zl9D89f4fT/NwmHjYg7jxdn4jlHjKo"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.b102a3c8.0_1600114398442_0.565739252228427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-button","version":"0.19.0-canary.a7fbc707.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.a7fbc707.0","@material/mwc-ripple":"0.19.0-canary.a7fbc707.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ks7Y517OUP1JvESqRJxW3mdFr90JFDAFZ9FYcD6f165iH2rLVbzpT526n+9ElCdsc6JcqyiUqpBdh4dOaG7C2w==","shasum":"d7a026628a1544114a3c740c4be9f06367361f78","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.a7fbc707.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZLCRA9TVsSAnZWagAA7N8P/jE4lWEfgYzUYDmy1M7+\n0EXmjRmBjDFQ9+gxwzfzMQmIU33XWHAr5iXtDVcHFwjnNZBFtcF+iQZHgOvw\npH/jiUL2swamNuVaoMytygSMDa+6TmhvL5KW7LrPViR4SYY+/jjpDrNf+bAp\nVZw5Hslo8ojmWVsGWrjZFTf8KFxufJeCiv7CA28UvuZCjYSpZSrQ7knUAtmW\nmDgIpkxKxHPXPuJfTk2yW/DvK5o4xyvDwYMW9locf6f7SV/7p3QglWXdroPA\n9ULbnOuZ8fKmy9YfvqFCy6vy9JdmeFrakWj09ns9VwKV50iV7+65ESNih66/\njMW9FGckX/Ieoeb94wkwp6SEx2VMIBN88NqydYgVkOcJqjnU+sG269cXakC9\nCkTvZTuw2cdKt5fDeD4yWUQHG2NBQpIJMA48nY2A5bfvd+Ug2JM9dRvYCz53\nWQkbGJQihr2uGKaWuj45e0j6Vu4y3IsP8tGTzuB13ykFuTqhdmclBvCQ5I+T\n1GKIv9ME6zOqO5s17yRqCCdO6d8+gk6KR1x2LbplZdTXoexMSF2zoKGvqqWI\ngmIrVbytH1aujeHmEAV6cfixk/N//CoCsLNJnQDrzomL7nlZ2bK7Lu1bo0aW\nnHPjsXKaTiI4s5kfmsS1vJfItP1MqVHwzR3Qj345w7P98IM+Jl88GHsTlziy\n7+RU\r\n=83FH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWtq+JMcXNuXFb8C+HNICpfL5KwCzgaJzIOLMAKMu45AiBDeg2iSYwYGPBZJBJJtPBGv029MknqqU+HlcUHEDdBfg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.a7fbc707.0_1600185930851_0.9581561680354824"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-button","version":"0.19.0-canary.ed6b8660.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.ed6b8660.0","@material/mwc-ripple":"0.19.0-canary.ed6b8660.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-d7B86g+frohtkjkx52F9EFgzKPi3J2l0Zd3Bb5WRl7RxovhlzyJF2REmPADlYhqQ+WOyRkSxM19gfp+XVfeh2w==","shasum":"ed8c43bd00b5126993e77f43ee1f9f2928a66c49","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.ed6b8660.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPjgCRA9TVsSAnZWagAAFpAP+wYsLZlocIpZao4GBLqR\nzkup0gdJOOSVdBrOjpxtPi+P+9xIH5lrRcjQVPCzl+8xNLuFZsmlm+xJMEQ5\nLm9xbe0G6I9T23XptfCGuCNhTRMs8c6hFijz7dxOjZzsoYvtbY8jNmkbNtF0\n85cHMvFgrX0QkvvTNgAQScURnXNxcOksDsIebM9w+AwyTsCfrYoyVBfxq4jF\nQhtG3kBaVmrZSS+PT0Xy+ZXJrgRkzrC6nFddQFthXKnB8b9Q4RnmUkDjZGLG\nfD1ri0j7D1Prn5F9jciG48mgXuaxR0WzoZehDkS6augzYEEvsFHvFcQW/cWE\nInzUHnQsQLR/HA8m5uNhFkZWjf4O5jLQify0ioYO+iVM22G71/sHNvXFpK7N\nysyqIETKgqOqcfmhvWRgQjMCpAtLRwkgjEcYd9z68Vgw6qYfT70dbjXVKkYi\n2Y1lyouQcGZjlCWh0DkAggmw1Uzzkst+EgcawBSbbJO3L3SzKGZNdIvYBS7q\njo/x5GiLcRrSxoBJyjB1+Dh6+vY7MlfhcvpIN2uSL2nDgmivrgVbucXO+wxh\njmXo+POF60tiwdQPwk/jhULZ4AfB5CGJBPHXpYmmIEDbedkdV+BHdLqEHcEi\nmUrPiMyaWOIK3SImyYotbzYxqn1f4iZ/xnePVZ2S1JA4dbF1CE2gGI9B057A\nGIhe\r\n=DO23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDILLrRY8dijIus0CWJNxVSYwJub+s6svNqxhLNU4k5BgIgYHJQ1VTVd6lVjVgkXYMyKVA3RKNd0x5EAIMWygd/Tfo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.ed6b8660.0_1600190688615_0.4839869385046047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9c2331f5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9c2331f5.0","@material/mwc-ripple":"0.19.0-canary.9c2331f5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.319bf66de.0","@material/elevation":"=8.0.0-canary.319bf66de.0","@material/ripple":"=8.0.0-canary.319bf66de.0","@material/shape":"=8.0.0-canary.319bf66de.0","@material/theme":"=8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3Dxi7VGxY63TqLBM7b0WwtTDkIcFTPMsvhlhWbh9t1nVdYKcil8mLieyWCNsL9VyHM4J+DAvbIkxhq1hPFsKsQ==","shasum":"a98307a7b985a8599be773300c823c8c852db308","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9c2331f5.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP6eCRA9TVsSAnZWagAAbTsP/0pygTaB9RNKlGDor9RG\ndpXAdVsuSX/28awIjlfqrReaeswWF3vleNhedUobkzO5J2RaywXtRvVAVz6y\n8RH0SMbLL8Pvrqxa5fqgavu74od0CcD1JSdlfnEPBCEfglEq6RGXMoQzjSFt\nk1UFtzGP4CkFc9swlMC8l8IrdvWkJzLJGwS8/jy7YSumXVEs4LcueuiisDTt\nXGp7LxmxT56MJaYqbI4d5DTMQjKHZ1FNLn5PqhdSuPt93fIpvBAMZJGjWx5Z\nBLOlps2E28BWqBbukausSLwlGTxB1f5FeGIWRfWKSWFKHRJl0EoCjef5UPlM\nL6sLtFDWx4Lhy4YBUs9v3H1VpNIje8ExA37OvaVm4EGR8qwKn/LX8/ntcec+\nBtkol8/SqCoW8eroVe5/md9VH/RfEp+k8EYQYyGSCWNG+Hei6w2dq88Ue6xs\np+Z0yxYx8/hJiX422MmkGmj9X3YNvLqUgVIapeTXYOc9uAFir+BI9pNISpnF\nTuhkH2b+a4SzgccKngY8+caGuNkKK0PEY0jikd1SVevMrov9UMGN2MbvHPpw\njh9k3EvqNs8So/LgEup03Ll6O/6ynVfglr32JGJm+TWR3pfM/LK25XwE/BHZ\n/lXN2nqlX50eTAYZcA+Um8K3mXBPBNiT1rgyE5nzl75nJhYBSuEIBhPVfZfv\nenfj\r\n=invV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuxVBf/3YNN3oByD7hnhI1kkOVFmLIWbtw6DltjAK5jAIhALmLwKyiCc/MqrrIZwhbic2Pxz0RHjvytgaxepnK18X5"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9c2331f5.0_1600192157801_0.3426212528915398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-button","version":"0.19.0-canary.63a5f088.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.63a5f088.0","@material/mwc-ripple":"0.19.0-canary.63a5f088.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nhlQ/RbG7Qm9sYux4kUXM8vDjejg4MmGUKx+wF1XyC/iBJn6myv6b23re66dxYud3r5wUN/V/d/cwp+vKCtJrQ==","shasum":"b6386b220b5dc6de70ddcdff23b310c21685ec4c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.63a5f088.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoWzCRA9TVsSAnZWagAAb2MP/jl82vodSEjiFRfnbzfB\nwtrpdl4rf2bmziZihPjMfU2M9Wg5QFw3KtI5f/KZd7dj6GQnIjNxIH6wJ0Ls\nDu2uqG4hVXvkN+XAdej7C4TcjBYZ+ZBBBa481vJ1jprnFrut3Slu8fUOwft4\nvG1AsuG7nweznDs4zdF8+vZW23wzoM+ZGWjH2yrudgD6SkQ8I55gR7/8+Lpu\nOV1rJvqkik7tMExVRaD2I6I4Yw8mJMOBQYr9amTwVugAOMgX6Ete/V/IFxG6\nt+ixPuk2Lyy7j3TTEF6iBLdrc73W3f25j2YtfmIGw3KFmmutKnBBS+GHKgPj\nFM8ZgxwYpu06iT1Ax9/3nssp783xlCdsBelB9Kqg7kTo9mUi91iMzBRSaxSb\nVtxJUz88myNIU8QOoC2tfv2FDzkNVjeqmFWLIjY22IizqJw1QzoC0K/kjGIg\n+oPDOK6i06nqAlGs3J1H6fvMjbJj4+hqoRovwh6ECSZqcH9wwbghhx0qp9bV\n6g3aq52/2cFxKakpas5m+QDUDceRVcxzSjM6vLLMM7h19KlvFOInBc3A1l2x\nRwENIZdPIjzNSqF7Gu/w/JSYF18Ef2SHtSkGJMhYrzdPT0Ams/FLO1N4mTSr\nfRM1lD2cSW/rvv86oLya61hi5lJG5YQsmRpzkGlvZDddW1xvGtY86OiLAiKf\nFIt0\r\n=LtJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzHBzHqnptRKXT+LJa5pJUr9F9V+OIGrj84pP8RulKLAiEAk4xoRPCXZ4ukKRLdhzgQj0PrgVQO7WrGaybgl04p7/o="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.63a5f088.0_1600292274643_0.5715276302721504"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-button","version":"0.19.0-canary.b7995e49.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.b7995e49.0","@material/mwc-ripple":"0.19.0-canary.b7995e49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-5Dv9yYzCRpjufZKqYEWgiqWitFB5ZP6bAztI13FCFYybZyz91OfGnQBRTuwBC65vqUh6gV8I8dc0ZzlHXAue2g==","shasum":"1a8cffc98ccbe13c99bf9ca8309bb9abd2e08cdc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.b7995e49.0.tgz","fileCount":20,"unpackedSize":77543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8pCRA9TVsSAnZWagAAKZ8QAJiJy2CjYMnIvM8iXbkx\neKK8pMF62BvpQMGWRVwc1AMKo+Knp9nFHyob1bQCPGPOAxV8RzY1E66tBFfD\nsLjtafo7qK/n2DjRtJnkYuwX+FJD1aMowQVVGqhwNwlMlTFgBQygtAoYv9j6\nSmqi0L7lkSJ/EWeegHfyRPhEiSqvNrgZFmOTsPlraOxfPApN368jhF1j0H1d\nJpE0ZmLnT0xrZKRHWHZLf/J83jhFQrk9M26EyxBqmS+dRryeyvaV/Cn9/jPn\nu/GbO/JcM3P2YQD7GGdGyVMG5SKxcB7YeLK9+WZNKlCo8iwJX3cvFnI04lkd\n/r4YoDQRXBHLzq+6nrZfV+eZeH8P3SFCl8bxgssbG/eilWMbg7zZAKf1FTXo\nWgTf4oAXJNElm4JtN6/Q8zlK9SH1uPXIzfHT/ITGj9O2boziQB4rx5fPHNIj\n5lmpYq6fbWlOkW54Yr+ELdolXFDeD0mwfxqTpki9+pXYjTrJGbqWSkROpD+V\nyyCMt/i6RQ/ueFg5pUNgi/7YUFsgsD/yOo87oCoY6nCk8KVQwukjocMvfbbk\ndALjRwwh5WOGUiiZ05Hq8kSy5UhL/G7t0FtNKuCv8yLI1ULoyHS3eejOeoQk\nK2mBaPC/3mMSx/BhCfM7YTDmuXthIkMeEQzfhljYFSbenKo1qK95vsFfnoME\nMqNd\r\n=COeG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq5WNYOWT4QEl49QiCAH5m6FN44ElppVgoCQHrXvUPKAIgKJCp9HNKTgT4aNeZGKZQaqV72Jn01kUANvX5AQf0ucg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.b7995e49.0_1600298793284_0.3607252908591201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-button","version":"0.19.0-canary.0da3ec97.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.0da3ec97.0","@material/mwc-ripple":"0.19.0-canary.0da3ec97.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a831d4799.0","@material/elevation":"=8.0.0-canary.a831d4799.0","@material/ripple":"=8.0.0-canary.a831d4799.0","@material/shape":"=8.0.0-canary.a831d4799.0","@material/theme":"=8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N564XjL8zF6qaHzy2vZf+oxsZ/ObLt05kjTfybEkgyLCnA00UDUeBbjTtJm3wxyprCdPVduraLNuwBGttG3iUA==","shasum":"5e6c31b71b533848cfa045ef6bb4fa0ad2f64c3e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.0da3ec97.0.tgz","fileCount":20,"unpackedSize":77746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSRlCRA9TVsSAnZWagAANZ8P/3Vbv/gGPBvI0/bf2HWd\nHgSSsL6USY3WiT/g+2SOC0IFg9ATdpJNwBNwt8f1Anx61vUGTPMGQpYh5JXK\nsn2lsVTVhSGh028ruZ4673wDXyMTlXi8JJu6DwepjfE6HjuuhTL9i5jEexi+\nCSEGC7NDG1Y/R8NweKOwExh3XXJlSopwZkps+fGZGViuiS6/e4ln0cBhuoRa\nuH6kxVtfXr3Wc9zk3nXB6fJar+DMW8d/pt5hH4iV6DjumnZPoycPa40Zv5Wq\nlABUT73mfnmLBCMnWQ81lLVbDcyM1G2Q6YcBY9Fi5ILSpCpb2b0oXMwofa1l\n7vI4jfO8UtIGVTBUhOYjHv354nTb/PZsCwgHHdSam5Snqx0eid54ZFQGhfhe\n0W66c/OpyNje1+NbliJl5OAO47AyL5G4HFe0VrYJ9XOKFIIRCXuOB8wZmdTK\nDvM/HSooWB1353b35YwBhVvcxzVs0YDGQoXhwBX0vdua3k5tGZY+WyGBe1zh\nqsWVPTylbvANFoBbhWe56xo0RHW4kRvdcxN7EMslUYhpYS3OGSV9S1HWizuT\nhTchdHI2jfkOgPy6KMBd1N3Qb/VJTDQOdsN8P1U4Ew29V6m1wJdT2IHOiG1P\nm9NjMcUpzKm4MXzHlmlq6Z5wS+0XmWrCgpsfPy7RRk1hlgN/CFSZuygYYUsW\noi0v\r\n=+xQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+zavAPzLkv5yAFcsP3fOAFPkQVMh5T3YFp7dV3AIcBgIgQR7N33elw8MC5FbuWW7vcQ0vbKGUWjskrSIHYzulQwQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.0da3ec97.0_1600726117519_0.12173365024464311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-button","version":"0.19.0-canary.a0793c96.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.a0793c96.0","@material/mwc-ripple":"0.19.0-canary.a0793c96.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.4e5c350c2.0","@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","@material/shape":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Mty0sG0/AiIKAIgY6jbmKYs4NzNdHhuI8y0GX3dVdqqEvnwuXYmfVCVb/+fUn94DxIKj2NcEjLc9ZCi8U+c5PQ==","shasum":"0053ab95db26feec033af26e939691edfa6fc6a2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.a0793c96.0.tgz","fileCount":20,"unpackedSize":77746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai6fCRA9TVsSAnZWagAAqegP/0tSseVNJGhWPVjTDMx9\nNEmkje9+LhVmjJ8cUYMDRBfGV4dG5qn25z8AZsjfrX67GtDDAbgfNDKUTP8U\nUU3jcfDxywJBvpHsggvY6q0WlO5weYt6jywIuS2o0x3H0OT6f7FX5f3E7n1Z\no2mc2AsGaxSySq1gNjIhfKYiV/V9U2Y/yiknsTSlvO7cAx5iZHMejy9VC0UG\nhuM6YOhSXaqnJTKhR4UvcIPegGgS6PzdSVaDnKzI3TXMt02dw80M4QQpoyjx\ngdii2fiyHVyPeYla28oDcXbq52pnU3SQdg9nkoVgq1ERR+1Cp14KdJt+nvCA\n3JqcGF8GJBLhLdg9W99EMtGR/nIH4AnupK1HIgP+q3J+bbvWcnXKk/lJLdWT\nTZHdIN0oLGkTnzou1MRZw851oLDzN+1res9FILyuXJFW6BEfWzBCaMYdfwGt\nbaAidsTZ8NADlUpAUp2/CeXzH27mk5EL59UqTVuDFl51Qrhmu69mTuQl+el+\nLZUiAQnXnLvF4N7Oh9I0OIuAFpLcnnZuAt7L/pS/WkZFYHi4XQU4wRFg41i+\n38RqGN4o/z9gKNi+gG8lvuhphnUy2y9P6Vz/PqbSEqTOSgfhJG6BauF1Xi+D\nA+XcTQoKQUGWE71o0DWgSmPOrNLjK4f+i5jIFwT2kon5PL9kXIYxaH7xuqXr\nv5sG\r\n=a6ky\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJOUbb+U3WN9CwLFBV5kN6h3Rj/2+O03Oigl59aLwtFAiEAirO1AVNws+4rPcQCMOwQ/wPSseklNHbL/feJTL/Wzm0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.a0793c96.0_1600794271252_0.46048387616397424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-button","version":"0.19.0-canary.06998a3e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.06998a3e.0","@material/mwc-ripple":"0.19.0-canary.06998a3e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.4e5c350c2.0","@material/elevation":"=8.0.0-canary.4e5c350c2.0","@material/ripple":"=8.0.0-canary.4e5c350c2.0","@material/shape":"=8.0.0-canary.4e5c350c2.0","@material/theme":"=8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-db5uyGoO/P1bJ5e825nC1tUIi3hLJ1/8V69NhjEmmFYRtPuhFvhkDFeWYIhqJK3dnMzTcWhn2BVcalrpq16cbg==","shasum":"ea8809424ae5f77aefd032d05ca128bdaa879e1f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.06998a3e.0.tgz","fileCount":20,"unpackedSize":77746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakGmCRA9TVsSAnZWagAA4gIQAJSfZYZItXHAX70t5F6W\nmWce5pFJV4MhUeIpu2ZNEGI3R+QVbzVDyce4t+v2UJ7fWk1kOj2gAzl4ZhmT\nZ9bcz4yYOX0tQrGDFUryl5MstMSax3GRtl1w7tSz8DZFAnydCGjnezoLidY7\nEdOZQL8MDuroz7wigqPzJBqgfEoxJqclZKJ0qoM3tJ8hE9Jdzt1YqTnW+Uaz\n80Q7cmDjtDbCPOV9pg/Z3kiQno7HS5d/H2aML5rHYi0yTLV6+3/SJ6Kt1/K7\nDhuIGAOe/lWwoQWU6Jg0wsjrGuVj/ioQyK1fV3sTYtEdwplWvnRwHbl3+3Nt\nRwYVGH33fody8pLfpJWzY57MjTio9MssQeI4OOakZBisLYMQ2gAoyTQagsJZ\ngd5dibWyoMkrcGDwJkfINyz6hwW8stSE8LPCdzMLEkYIuCJiusA4kds7xcE9\n9zOTszTZDlgrNePAMCms4p5Ty4av/eIb7+XXn44bIVEBMO3YL7BOafl2m3Ex\n05YvIvqzcKTAzNGTloRLI6ZZkqiEl5/fRpXPFG0O2jWsK2Dr//mk3wycrx1H\nScQMhaLTA4SGTUMTuA0EQSu42g/XpxA0f/6oBEOXpUH776ihxkQNO+jt36K0\nw6d11Nus2qQVCqO/20O1VOrGuadcExYZMtHkHGxTv1iq65o6R/JscN8/Bc6H\nkQvL\r\n=YCsC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA37RF44PDBwnZOV7RHXRM6ZKdbr0yuSJg1WkYQowOtwIgXHkp+GPTwmj5OTEUu8FlgAe+SioUEYXhDorfOZPIgHc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.06998a3e.0_1600799142339_0.728551107883469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-button","version":"0.19.0-canary.3484a90d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.3484a90d.0","@material/mwc-ripple":"0.19.0-canary.3484a90d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.16c563ef7.0","@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","@material/shape":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SAlGSlOa44iz5WXGIUBFdOFtlh8HFVWQfkheSP8DbPEfUPxuyGrtEZThNt/+uXfUuaEoWv8Uv55zZtgOGyQQdg==","shasum":"8b447e39ee69c3e5419b8d0b8ca41500a6c1f4f7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.3484a90d.0.tgz","fileCount":20,"unpackedSize":77746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTXCRA9TVsSAnZWagAAeOgP/13oVC/4IWyuDR0K5JCD\nEDnD2cryXcbsareokvFR40TiBtrUZwgMITT5Yg0OjsOAf7s3ExYjLHtjsbi9\nUSec9yhePUb+9+HSnYbbLUiNxxX9rOWB6wTwQ6Fo+Io9XCyVtSEnlT59javT\nzvT+XDhCakZW7EueQg6GF5l5W/CUscuUdrLJb3lZWzbCZ3jioMbbZpaSFIk4\n1ZObxIYL8hgcOtepOZ7dmlU9ubWibBvcTEkQ+dPE5xtLIrsG/mTCdLzX2TN4\nXH+88OjXeSFsSBJHN7yw3j3v/0k7qWNq23XilhT7ccojtL9hk3FS0VUiFRDB\n4ZnRkoqM23VOa1l8/GN2+XX77NbJ9jsU8njC10Is4rg32fnx51ANWiiRYf3P\nn+UjV1R2vSdhhr1W4eusWYe6bvZmo2U+BLDjVnMk/683kyuSUrso8s0KptI8\n/oDcOKPdMJMEBEvidmSYP4RWbwYAmOBt8zVWSm65B58SzJeW61TN0DFSUVUt\nOvuQL3G7L/Rsq6TPLEGiOfBtxzPFJDSpkwnB626yvpbnj4wvok+FgF5tp1i1\nsA2mnSa3A6lKHR8GjzxXPbg2VPSIvjprxbGT51fR59TD5i5kGVNi7MaIju+m\nLzky+xp3B+4nVu/pwQ496Dw+ewEfEkdXfyHD/gueX1tITiFHjUElLCwrzYb2\nzgAe\r\n=v2U3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoo1vyV6lTTPVba+AEPJlLuqACscvd8B3yYd7cpyMOqQIga09GbclMqSY+PkfZM9VRNn8rypUByTxih8U+bZ+3phs="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.3484a90d.0_1600812247107_0.45062377214499527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-button","version":"0.19.0-canary.3f99af40.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.3f99af40.0","@material/mwc-ripple":"0.19.0-canary.3f99af40.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.16c563ef7.0","@material/elevation":"=8.0.0-canary.16c563ef7.0","@material/ripple":"=8.0.0-canary.16c563ef7.0","@material/shape":"=8.0.0-canary.16c563ef7.0","@material/theme":"=8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eb8p/TeD6dOjd5PVgkTFw+7dJ0Z0ha2qwZ47uwQb2Tq5urPECGe1x9o1DyqtYfI0fMl/ZKJ+olcpqpo86eT7Rg==","shasum":"1c3ceaf3ef08660d8028c251230b110ed4b7b05a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.3f99af40.0.tgz","fileCount":20,"unpackedSize":77746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSnzCRA9TVsSAnZWagAATOYP/1qhYwAffcHLQ60JU/8/\nYqUFzMH6fMymvh+UxDLMxEq2gmWGYHYyGj3Vg+W6e6FJhvpyeM15hAEDAKPM\n7jadIJvHpqUkok/B0zUW0m4d8slm/8Cp4vYtEK9/Ty0Ry626Gthx1sxTa2F5\nnWqHFeG2QipXOy9zHMwSQ0GxQPOSp8VH5wTg/dbZNX7isXmYEyPA0nEbK6M8\nNo+yHeWjaZzGLl/Uvbn6nD6jZ7K0p1bJBYxXzrZDu1Rs1npWIeBVUa9q1pAd\nHi8IM4eCa7vGHAuj12jEgee7z2yKzYIJV6RMVpZQ/xQbvHIQeCouCtyKLrpw\nBhnSfTgWp0I48AhtKQcJLnghY2a4dXqEn7CXb+WgQxmL74wGef5jbFy+IzV+\nA7qAZYYIIxNKd99Tnyi3HAsxFxlCuRW/V4lBVeTVWHMUxY8I/rSxl2RsNn7y\nj8qVUDL6nYZZpNurenSIFhKNh/g86OWk6JEE9blvIoGdT29g8VCliDGbFs5i\nyiwdprZHMpzFhiA/DDHwzqlBjSn0yz/Mov1mtOZGecAJSTeKMCoJEuZYNVqX\nS4gXpEwcxPZUToXw4bbGipm38sPtrX76r93loPTKXP7auObzKzwGjMIearvS\n+7eiEictQ2/gDMFSvRpmvS6MPlIgcY/1ZHt1UEBMNULbMFhDDZYmf6LQ48Hm\nMV1u\r\n=EjlX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6219rseuA8jH93vMHghMA1x8qW8SSpUSMJIM2moaXYAiAgmIda++NEip51Nz6YOIOe1cNCxwx3d6js62RYwLnggQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.3f99af40.0_1600989683294_0.046256166456133396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-button","version":"0.19.0-canary.72aa1129.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.72aa1129.0","@material/mwc-ripple":"0.19.0-canary.72aa1129.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XVMJvdtoJUocQmCl8fCI9iSPzyWK6vKsaTTv/umT180V1gfKykw+AeORRxtoiNbPPtZY4h9M7F08koAisZ5QBQ==","shasum":"fb4af99a397c3329073d29e668af44f706096df3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.72aa1129.0.tgz","fileCount":20,"unpackedSize":77746,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwHCRA9TVsSAnZWagAAPegP/2PqZ+80KjqV3IJZvzF+\n7ZiEQcmOekSdHtnPq+KP4q/1WP03TM/5jsRmWR5Mn7aTOUPt9AIrxNkZ06j+\nECUzEw8x2A+2GYAzHDjIL2sdsUDVJrZmQv/vVwrtakOCLKfpAdS+8c3p5GRV\nxzbJSJIUpqNy9AtPtiHKh+lzBskiFS5jOtIA6Z0xHN2LGOSolg2dpHYk4NE2\nE6s84SlpPTXjBft1G9qapGD2gUDgdFCU7NQxWjJJ0bAPGRWlc8109UWHpSxj\nEBHU28iz5vC6fLmMUAmCj8CklUQP3cvnhczhwpwKhSMt7mC+Ld1EKTaPMC6P\nAVzfn3DqHOceMlBAtnnXL4PyNzbBdaRSJKrghu8Tk2vCvDghX4cpp9/h+kTq\nkQx3YY6idB58GUsHmKsN52Y5sxz2xtIEv3tFA4iDDQUJoW4Qc9p0U1jNYzNX\nxyiLgbFWth2zhP1KBrkzkVwo0DLz5VUugawfM1pmNRSuf7BbB+9N3iek5+Qj\ncD59LutAj2CPqBWVOzFgEcUfDjsEFEYK0AucnPF4hS5JxB9ix4QLEYDu1Yhr\nCWNhznW+XCyRAgoIMgv6UDKs4vdTQJFfkqQGfXDEfIn9B4QyocbuhBV0LYjX\naK0YqkjMs3kfpYqUPJGoCmq40HjWcTAtS1wTPHctBmQcvSgeEHeOnFs7mtZn\nzwe1\r\n=9yO6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0vhc2H9ZV18k3Hw8M5QjqjuXKb/bRhMjr04sV4IcDawIhANGPCJoAvzoeHaPPYmD5bgQ2p4pYbKh4IM6DqFRG55a+"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.72aa1129.0_1601068039259_0.6645812216423517"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-button","version":"0.19.0-canary.394fd3f6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.394fd3f6.0","@material/mwc-ripple":"0.19.0-canary.394fd3f6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AggtqVZ3t7Hh9hrgBWD12SSCKWO993OaPDCKs2t3sG/VMYLGRy7y143iL5c2+gIcawHShfNLHNCFBffiVzzMJA==","shasum":"5a934c6f210446bc3daf09dce4ee785bfb966356","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.394fd3f6.0.tgz","fileCount":20,"unpackedSize":78909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9MCRA9TVsSAnZWagAA0vIQAJHTzGRHk8aC9BHmxDLV\nyz9MFquls41wWHTA8vovxyXcjhmLkAFddQnxRxIoaWrnmS3OTvP8UTKnLrfL\nZy/ftbIWhq6JaLkWXHp0kgib6DFPUZB6Y0ab2d8MpKIoM7/c3020ymI3sMM5\nP5vsgBg/R6gS83Y94EuSNZHFXxI3X7sIbeoBAWur5fbPfIO7A2CtWQH7YWEe\n4yNOVN6VtnIRl3BX6UU8canX2Mr/apdPsjKt35NBcLgJEtZJcVzddZYQWajj\n5sCmQj1TNb3hqcBNU5Bm3StWENs1LHlTa5F3K4YqAW3lPxviQbSZ7TReTne1\nS/1d481l63a/2AdAb3xBvp6zwPsqoJg64guEyViCh9hxa+0SPkdLnznNbfTY\nAVDO+8BjF4DNfw657H6r3Qi6JHLZFL7Ab7wPXnNsg+Jo8xdTJ/d48gWwLWee\naNGK1c5Gh0Dk6SeVwqNQYn9Zc3495LRBMTK6CkCXxhtjdxiGuJQFFzLcSXZl\nfZRonZa18js5XIOH+5tU7VkZfY5Avzr0O1LSJrRB5dalqni+/xuWidRZachx\nSsWUMrVJbEiYr9tvNvjOZ/hFLsM0+R+coNAs0kDBaChdhPfvvbgSgjrNTtx0\nK2cRJ4M7Ohuyv1jNcPbrH1VuL69rGZhyn3VFvDQjYVekRQI26OYmgiPi87Dl\ngPQi\r\n=1jJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeEaM6rjAlz9O6RApygGF7H9UrcVEQykQ+RPmS/UamzQIgNyvRVhOeVv6OtJorPmNfIL9sY0sc/Unufg2+D32ZsGg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.394fd3f6.0_1601302348444_0.31881050821153867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-button","version":"0.19.0-canary.347110f1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.347110f1.0","@material/mwc-ripple":"0.19.0-canary.347110f1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-JhxHEnWfaO+x/ui6k3H5wkCZ9MdB/uf+tbJrAk3Ac0zgknrvsodAwO0EuphMVGtsWSTQ7tmaRfHGAMjzHTXzWw==","shasum":"c7b9f81a72eecd78a48845e4ec3139a00a4c51a1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.347110f1.0.tgz","fileCount":20,"unpackedSize":78909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRSCRA9TVsSAnZWagAAfcUP/AgFjiT8KKwA2R/pWuhe\nM26Zs5lzg7bBz+NV85OHxR5iBafamjSew7Jqdmo4k01kVEKPdHkKppKa3517\nhWzYTmeybwHtwHiOJkmn9Y/qKUpIoZWAypPnrcYP53CLvSYCiiGs3pdPJ8cU\na8HMr6D4y/6hI9wWMZ45dmxtxmgR3RCubCT6IwCkqkjYD6/ejlBOwOCD1o93\nyUqkSvXLvVykwgCmn4mf/lrpUeVv5vavxZUjeymT6oub7ffEeYXXQB0g8FwS\nR4+xIc6bpUFRnS52ldo9MegND1v4378MGfBnhytTLMui+4lVgeGhvT4rHh2h\nE9K4k7DttHbb7p3NrmZ44mlT7eV6Ok/i5qYtcxJizV7prLxOnjYR0Dvqb3Yo\n0P/fsy82OuC3y/aqE74EaA1LRE/yqGXHRGQmDyJ8LF5vfXrLmZcQ+9QASoHt\nwa/QzgDiIK0EuyY2G+uc+bvVAJPe8Mhfye5l7p4N4dUH2l6HFOicd99m7RlB\nQL/+jKn01v+NfO3C8Kc6mvmIq2tEOtT91XvewnxdmHLkzR7m+Y8hxM7p9iXS\nSh4N6L+ZUAf1vhMmsJTDZJMbx+4/UExVhCcJn3N0dduF8CGskJuL+LWOcn0G\nb+ReYrRp4Y5mUQbEIeMuJbOB60ZVv5xm1bp3bfLuVajXXVJqqLyvsKldge8R\npast\r\n=oKxB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4i5nTO3jJMmL7tplgbg7jS0Hm1idJpgYK9GRMki3oXAiBAI6ZYISnc8AbHHtgIX/ciPhfkfsN4AIT4YM+Qnkxprg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.347110f1.0_1601311825686_0.9447147262717135"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-button","version":"0.19.0-canary.5e330bb9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.5e330bb9.0","@material/mwc-ripple":"0.19.0-canary.5e330bb9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.d4cd83a85.0","@material/elevation":"=8.0.0-canary.d4cd83a85.0","@material/ripple":"=8.0.0-canary.d4cd83a85.0","@material/shape":"=8.0.0-canary.d4cd83a85.0","@material/theme":"=8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7he1jxVovYgvp+Vp8bmkvsyuTL7LReJKRJndwWVZPpHVAASJ7e1x8usNWsFD8Mn5x/gTw7IcMv+5fEFKi0Qeaw==","shasum":"842f9ccf9f7a95b7403425a8073d51a2dc06e460","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.5e330bb9.0.tgz","fileCount":20,"unpackedSize":78909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQArCRA9TVsSAnZWagAA5KAP+wZ8J8w3UtC0NHwbD5bv\nYIXZ50AVJc/0JebSe7lnbAsG04UnqCdHhSB/YLHihNpkyyltDm0f6thZbLX9\nIBr+h4+walUO9NIs1uAIpSUXHammA29+nnR0Zvd8wV6itN3/jLV7WMxdyp2g\nu2c5COsZP6WT+K5uFi5l67X+EaRknFDRuxRlzldf6d9p4PiLEmG60IWdfsOP\nzwqeehlWAW951UncxrV4BLT1HoOearm/6J/wTuGhF8UHFud7XasvrX/ZhP5C\nJtI5ZpupE0vp8e7J7JDcLiO/mkXbRRcmBBf5S+jRccpwcGQoZAqzlkzLtEy0\nG1jMD4AL2b/HWw/iMTXQdexF6HqtvxOtjGk7x7qVeu7gOsDWRAIB7u2xul2p\nw6j6kCHQW8XaJd2eYItchHcZAkNPdV23NzbvMqm0pssBXl9Pmj3I17hsTe2c\n8gwU5aBrBH5q1rCLh9GeH3VbcSm47BDRRLhPmGM5hFGhPNmjAXTDRkfipL9/\npbqUdD9yQqYj6JL9bg/s8Dqh6sD1tCO9y9gW85EMyy1v1Dn+gJ3Rf/tx2nYD\nHa8fv1NAHIGlzGs+jBySTHJJFTUZuuWQm49xXiWjC26t1kFLO5lKxHTPaw2C\nW7plsCM830muZTLxgr8Et64NkIMw2ZBNdis/s7mYWON2la7CEmeUIaV0Kmeu\nfi8G\r\n=4FnW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVB1EKdPPrK2X9WR7aFa/aPT285w8HsOGSkTZ/WOzM/AiATyEli9ShV2t0Yblr4Ej/zvj15/3uJeHCtDa+Tbd6QvA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.5e330bb9.0_1601503274153_0.20697969354214085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-button","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.30b9e3a9.0","@material/mwc-ripple":"0.19.0-canary.30b9e3a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-VvadSry8V3aO3iDG2BlpxzushQop8mIkrm6u8rbpquYnnEw+voFD1rzGSaU+/ovMGyRveiX3XZKN5kdNWeH/KA==","shasum":"28100f0c88ec8209786af5cfeb5853af0eeb273d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.30b9e3a9.0.tgz","fileCount":20,"unpackedSize":78909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjTCRA9TVsSAnZWagAA9HcQAJuBbCDOOUWDEZCTFyNo\nw198fc3AzlsiWHWCiG/mwc19pKw5X93XtRNR+ENURI05BN7ZEspJmG31FTQh\nibcitu5kTacOb/bcN+VedwjDBGZDHMk9NzvOGwgdd226utQtk0/g2vCkW/io\neERWtpcy+P8w+1lVzlzfMeMmC/EXZ4adtBpPOUEseB3fsL6Ya8/4zq1EkdwU\nM6ptb9S6eHpm3Gn2r1P3JtfaCQZHVZyHnUUIWb6IzzgBJYiiNGr12Kmr2YTx\nMtAoOFULXQ8EsoQdbLu5SWv1f407lwcvaiL+FbTzQh5XC51h3bkTfEklY34C\n/XzsYhw5IhAmlSUfNosxvfV7nUn9aS0THvO53K78c3AcNRYcOA8mm/pVPaOo\n2kmyZurPAHH13HE7o6sXV7MEsoc8Nxo2VXvlEAe7Fy1kFpDlHiS3WncPwcoB\ngC/wJjP3Es8M31ObS9Ud+e3uCaDNcElMCLjMK7ziuQvyozzXO85VqZflbitN\nP/srFfN31XDUSbejt5QrTxYmzPJtH5/USdd2wLjHR9sVKTxkbBXOJEKPvSLc\n4ap8DEmele7HWbtNeH2Ww6KuFUG9y+rPVxBnGuaRALskXEeWKK7ZqniOxq7Q\n6TC4C4BoqxjtLFNfLwWWWwDyYNDqOiwlzwI7BJdk2xe2pOFjEIA8JaGMDQAC\n+3NH\r\n=KPLH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhdCp+VRNY9z51ecIxsMHABnaDRwZDFc+0eZNeRPQ2WAiEApMD5rwijXWdaCGENUOPasru/C0znLkJeWql59leO54g="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.30b9e3a9.0_1601505491075_0.9705154992988745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-button","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.7bb04b9a.0","@material/mwc-ripple":"0.19.0-canary.7bb04b9a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-dcDjyj6XoshlYLFMxeVTq3vTAEi4ggzgskBG8OhYQUKOP7sMxZTNKmBjs7Fqcv2krOhzdK1qKUbfJzMMHZSmnA==","shasum":"6239f6daeb15efb93c01caf038121cd64981f6c8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.7bb04b9a.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTJCRA9TVsSAnZWagAAoiIP/0byemz1pyleTo0u4fn7\nopxhWx4tAqOXiIj2EJqgoRIi/yZ2obN7M9MnPuC4fCWtlhkZgaX7UuV2YjCM\n+bkU6OPr53KAvk8VgmeMQZz3756dJCcfMD+Sn4MhkfQF/RI6RYWbLkbFyGD9\nKEDJRsmNxsaFR/r/kzJ8lN2uyBBgL0/Q7u+NleNGvI8OUX0lGod21nmrydM4\nuqssZszATigFjvvGzIoFKFjWErZtsopDuf8CQ7ySUW227A14rsCwCCPGrMQZ\nuj9+iiswsGKrpZq9E7rOmaMf21IAZslJqak7Q7XtFvST9bt4fqmX5Zo8onBj\nEg/B5FbXWyNOjH8ECvJ+nZLtJZoaYP7n/MequLORwm8hxEX56K5fUG0t0Fin\nAdH4KLjqF1yys8esJn9BhmbPhANGn+JbZHoG0hkma6Zg1fxTFAoCHBZbx2Pt\n27ARrmwCjmjwqoz8BPM7Y+qvpwWHDDFeTLanV6u4nAgZcYU6reMZRzngflCT\nSZ265DsmtvnmIhquu8qm7o45eYQk1t3aEWME+K/oMN4zxM5KVFZINL4oQ+OQ\nREwiiuYsz6QXFMDNJi7eaVHV/jGDhDM44bQg2Xch1B1xzulh7hLxoPgOKR7W\nF7QU/RSoSUOjHdWIltHq8NcWC5Fj2+axdGdURszmnqQwq+aK+tUPzF1Y+AaP\nooGb\r\n=uzH+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1sChGrZIFMkVPZ7fVK5euXGlYU+vYraMQ+T6QaCqVngIgROro9V0dYBr7sjiflFjgkLX9ko6qmxCp036jwenhJ0w="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.7bb04b9a.0_1601594568664_0.5112077076829027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-button","version":"0.19.0-canary.615d861d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.615d861d.0","@material/mwc-ripple":"0.19.0-canary.615d861d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-EHJeWptjxlM8jvgQMMAXZrlkdVWpqc4c1SQV2V2sa1Ck48lmHc873C1ZkM8+MEcIkPUesYKHdSB8aK+EaUkMvQ==","shasum":"7ddcb9b1e465faf12fc68677c015383c3ab6ae46","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.615d861d.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoNlCRA9TVsSAnZWagAAJUkP/jThp0Y4ipT0hCr5+tgY\n3EiiWs5/tn1Oan7YKljCcPDVth7+FvUcSBB6MrieFCgpahz0TkPhdJ0tCpIl\njpRGjyQz3qpXW1c8TJtjZgPoNw0uw2rJ6QM7F1kgCsZoh4E4OCw8/ci/RFyD\nlcLp4U4PXbDf8YIChEVvxlCLoSjQ1fXnze3JSIhYo0+kdZ5rRu4CgimznrbB\neD6XtUNy3iCCFN2C02YB5J/wmWheUQur9n2MHqkglAsHeEsgvww/sp9bI93M\nz1j81O6AHBOa9tFVaq8avv2M5dAeB8E2wqZ6S3oX4H+ynlNiYwjrUICW3ABU\nDQI8ohCf2H74Zpj3SJ7Wck5MZqW9ZzqDoWRuc+pWkK/VAdDpQGfukvkWg1d+\nNGihBwFY14pCFTe41uqJAIDyLvv8slcXCvwNioLymoOkmrojDCMDGXGmbEca\nQAw6qmZoqVNYnZq/dC2rP8YhLct+Nb1t5zVkXt8OlrzQFx7LiVwa2FeTNjXM\nqFstv+6cZQ5xCsjhigwaFLWw4khu0gi3WVvUscncs8YtqgO0VDk2lqMUuXrF\ntJ1w0QNr9+ZXvIiu62sc9V33/+ssRwis9BxvsiaYMPSy7iFx6oGKBpaepEaJ\nd8Z3eeeHZ+fsbJYF/VrEULt+jcLWSVNudn8meZdE5YnT4XBy5njK0EgB5HKw\nL1TZ\r\n=EnNU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQ5PtGksmODlV1FfxHLwk6Fqaz/v45tDUwma6RcjJpeAiEAvx6DsBCLIVWEqJeMNgqS4bg8DgTCdUKowoA5FHT4xAU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.615d861d.0_1601602405279_0.18226942914463806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-button","version":"0.19.0-canary.af110e86.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.af110e86.0","@material/mwc-ripple":"0.19.0-canary.af110e86.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.38ef4501f.0","@material/elevation":"=8.0.0-canary.38ef4501f.0","@material/ripple":"=8.0.0-canary.38ef4501f.0","@material/shape":"=8.0.0-canary.38ef4501f.0","@material/theme":"=8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Vss3kfpf7r9GFWEwnZvJliY4ShX9Zut9m8XwWAtL6zKT9tLYTXcu3zYJKfCr2dwzKFQ1ThBjvbtC5+kTzgSJsg==","shasum":"d8cfffd70dcb1c447318a70c07ad06ac162e7320","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.af110e86.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7yiCRA9TVsSAnZWagAAOeQP/jglqdRhu22TpwpoZm6M\nOu911aRpFLlq59e/TBbFrBCKYNbHwMO6bNd7cina5N88unvWhYqBNo6y0SoC\nKWH/fIEiwzCf/kkEk4ZoPzS8Pwd3soONajh8PIEqcZ074XCgSP7E++m4W8tL\n9m3YLTrwSo0of3dLhzDUv5Q9rrhzujUZqb2Y178CicAjvPVgqBq12lXGuL+1\n3tB+FM9rvw3zi9O/JDPgii+PEEySHMo4m8yqIhIc4ODqj+c1zM2FGPOAJJXV\nVblxtw3ISkLfl8/DFWrUJJ82bLT7aeRZZzGVpth/0xMaG17C5WBcV3OeGxiP\n6WJQMzJUr8hwM+BAruyKZkQRw5VWMI97DeiFL5KgJ4WUC+rgt9lZe0rvGkqS\n6yVdoniPP4vF/SrvfAhC0+JyrWn9346hqhEXeOoEzaqTtP2+JPl9vTApvqoV\nH8MpwS/ky9QjWuOSkr/pqjWxWW1oMgcnXKvH57XppuDtGe8XJ5tCpoRCfDTc\nny/sDAKBfQXeqZuasC7+YiU0vFFL/GymH42e/DtxmRqQeCXDhGztj3L0gAvU\nzYhWwsiIGHPMHc7qtNK2igUdFRW2QXy08sxuTNvPGYpbK6NGv2gDTdopndH2\n483ec7CqrIlIcvhhQYPZgTWtOVm6Lhu1cSz6rXLkH99L/NHhVnXiqepfslXw\n3Wdu\r\n=bwPs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvRTmNRqMAG5//LjzOj9mukyPbJXoL/e+xLd5MUWisjwIgWBoPccARLyWarJquQPDBzKQNGIllRwFgDWbb3Vqr8P4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.af110e86.0_1601682593816_0.5791263160630808"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-button","version":"0.19.0-canary.89d27ca5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.89d27ca5.0","@material/mwc-ripple":"0.19.0-canary.89d27ca5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6M78XHvSU4R27s34PhgBvCybyliEHETrzqyw/s6+FzVK8pZcFyFmZiEnPZcsA29shM2ayzov78zjTI8sQVJK8A==","shasum":"8b69b550dc9ec413249b2902c797e7c60bbff708","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.89d27ca5.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8fsCRA9TVsSAnZWagAAUoYP/37smt5js+UhaYz+B5sS\nAPBcRMDK7eaeoxo/TG/RYsw0M+5BeWB1XZRPcFSl3Ko1Nr/uM+tRxWAzgvyC\n7mMNp9e4X1ZA4qRnj7oyiUB0j5+yXfobUPeZ+QVUcZhz5ZmpdkNO/hn68/ID\nYqYfA8iPY2QGRJggKMClhq9RYFkjR5BiWzLtIxkXESGW8DgOrSrqwdGNlCfQ\nXfdziAq0ayRtpIUqh72FNXZ+clHdpi/FDt1ASr30SRoMJM0P2n9NmsjKpcy9\nwfC1m11Ll2Vyp0K8yLVbgQz0IOMKP5QY6vVgnYCpNnpWjkmaHJPVOWIocIOT\n9667corbgFJM0nX1I3z/FJDaIpF4JRw2dw6RSbQ60tRw49ojHqDH7x1nnCGW\nDEY1ROp2SLLzuQ+ntoaXGdPIWWgd/qRxRzefWq/T06MMKnDX3czyynqT4+eO\nvsg781j7qHKurhVuUzfXd42X2SptEBBOWsn8jJp1mu0pgSp5ytTPivI319SG\n40VG5+0tgZoBm8Uuu9GlJ13dmzwIVX1kMKD5kiEzbzlsJ0ChtpyzGCiFajou\nl8sit9aZ5EP7LktTfs28DpQHmIS0y+v7H37V4ol2mCGTq2qyN0VeKD0xBh5F\nToIV4DZGQXfmyEDeHn1VdBrjnvcMAzaR7XR0Vm3vogffFAGc0YtE1t1lCk/Z\nCFHm\r\n=8En3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCo9XoEapeK/bZVtaJ0bhBf5vc2Uij0tz0IzfpbC+0FDAIgSAa6Kc2uKP6iNGPf6mOyh0aEas0ersGTpdOL0bVG5hk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.89d27ca5.0_1601947628313_0.41712532425812787"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-button","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.9ef2e7c2.0","@material/mwc-ripple":"0.19.0-canary.9ef2e7c2.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-o85gm4POr/dEbiMuFz2vGvMpXElgZi0ZcRgBD8IRa2QBk7KP44cUf0iJl2dWMqrkqGx9T4uD5rv0NEkwGPEZRA==","shasum":"c0105c9b9196b627a020950bb14d040530a93358","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhgCRA9TVsSAnZWagAAKbgP/R665p+n9l2F4F+R8ulV\nyo6sbT0LgxB2a7LyHjhCALSzAsun/agLX8bLL1OnIz974N+aglDMFBvbDC1K\nJZK7rtoAUSh0pCKsMxpMoep57IW5yLha4jLP6l96U1XoE9siCd+tvMR/iqry\natAysRQIrleXe/5YbNBYVu1UMHVf9O8kOTR4EVjgwezGkqzm+Nob6uPOV1p4\nb+xZfgV9d0RJQIR3PWRDxFoinu6LHTTagzgria42cJ9LQ0SkOnd9VmqQP497\np96aI/RuW8nYLg0Q0F4R5c/skyPkvNYYqLgFt7ZtHGNpar8wn+50tQRHJp7a\nn5f8MMLt5BDgQ72bj7pXBc1YNkH/Qk/fpLe23/tpXYGDD6QGK5Gys1SjZZnn\nBlrBB9hrof/ZxE9bShQVyliOJxiRqfC6QmTKV76n/qkBLDals+f9ZMLgWUHy\nWxBgkJMaLNnqFci0N6sA/x/LDIjew5MqiMbrY8iRosXau5bKZXJa8gjhYRRW\nSrjE/77u4h36PwELifUnfVYVaTBRvlOZvpoalQ+Fl4XsnuqUGnGim0+wfBqE\nBo+shz8cLvj7tMV0lNf3wp0UxkA0eBvsim/vlLBVs/ZeV5ZdRnBMWOZ6Ezo4\ntYADF8+DHAsRPEN9pTHuIJQ8oIPvfDaYc33J2g43NE48XEu3T21mev+N0Gb+\nS/Am\r\n=cAaA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDfP9eMA1d8sR6Z7rPP6ehWqmUPBZIrmrqccuGlOR/YCAiBg3P70WhTrzOgWfFn8P49v+9kPea3Tf8UuJ3fh/xDdMQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.9ef2e7c2.0_1602029664516_0.6274897928891432"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-button","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.19.0-canary.96c8bdc1.0","@material/mwc-ripple":"0.19.0-canary.96c8bdc1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4S3DzRhB6JfmFLx4URh0f6WbWevdvbMCCP9jtLzBULhyZGDJeQz8a44NU0i+zicKSPvjvGjKvxWaH6GV7Ng3ew==","shasum":"342f2a90a6d494a261f7c5882a12d929786b8a0b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0-canary.96c8bdc1.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiARCRA9TVsSAnZWagAAW+0P/2xmrkK46duBNKhA3xwc\nfrjhuTuPt61+XcfdwpX7BzcgTL5hDTyerAmHPn6ZTHwIsDnvsGgH1fX+/XXF\n3fDs/ukXd3JAycvkTCvVD2Ps45nkfvAq67nB380aW75VHufU06vyNrgagqE0\nff5p9IrUiV7fs2aK5IM8oSW5OuyJAT2qXWg1iroVqghYS58ifn4uPjcv1C+1\narkXVDm4Z9UbjWRCjrhqGiVLWWuWETbX5VQtx/Mky8NBxWNdqd+QWQiZRTsl\nOIA1D0Jp1hRHAtiqEvA2rUrVcZBByEZkBhXTj1VqxHTsmm7pJGE0oolBpfzp\nmn5mLQZO8Xpt1v1zXyfpHtde+WfroB+s1YXjq//Zd1GvE2STODbPAs4Xqnsn\nWCdJerwpcKwNTAkz80wv2lu0y4qkl2pBjP6UY4Ruxw3E/xkyCWSYbmXWUzf2\nY+nvL83U8Ok2oGiiR5doE/6dKagqQM1VOzLZkr/1kFMsGkrbieUjEawta+yv\nGgD+qv+QS/DKmYGa88FAvBID8Q8eJsi7Roi/jNEgy2C9SbQIpBROfG3QwhwA\nmGMvld2WrX7jslhWgxLe85ghRgFxBOpAHrOLKHiKvjw6MzxXqBAtgfdlUWNJ\nrXKUPN9GR0C1az1NoRoVtr1kH8gSv2C23x/DllMaIgMSWw3Nd8BvkVK6mb4b\nASzE\r\n=qe+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiRcb6qVy6knU9T8VCIl0tXkq3haFCWWTZyTFcxmaPegIgFet8IOrwXmtVk8kCc1pi3U8LmLstLzC2+4k7hNAPbhE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0-canary.96c8bdc1.0_1602101265004_0.22287553727991094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-button","version":"0.20.0-canary.6c21f034.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.6c21f034.0","@material/mwc-ripple":"0.20.0-canary.6c21f034.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-SYkS8yMVnYw731yC7LsaKwPEcaxNZmBfJKSgmWs1Bg+TLdWl22ZgH7cRMj6jM+zUU/wyFTL2uqN1i1WrFkGN+w==","shasum":"51d9727abad69cfeb1d669edc327107b52b41f0c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.6c21f034.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGICRA9TVsSAnZWagAAM+UP/2PYmIYeHA2qAjn19qk6\nayccOuogukagM4KnLe+wdS0eqo35RkaiVu8a+SDrensZo6cA3A0CPq52M3WH\nGsxNC5q+2mdiNU5mTj31aKFwndAtLqXJraBpJVCbEWEittOgMux8Uz5ycNKh\nheWNa+aIu3SotM7Tgk4apQrgSebPWg3J0n4cEJ3/F0uadRYcqfzSAv6wQmVS\njK4ImvNeekywJen+1Qnhb37NBE65BKtNZtxQz4TNMM759R0YS7sfFyawgflM\nZ1e6buYYmzWK/RcaCsHyhtPYSyNXV5tRb1dRqCZeyNZv+ALKertGvntSD1U6\nGC1NKR1OcQCan3rxzrMGfANEd2vIuppg+r7FAfma+6CNR6VUujIbScqEEazb\nqkfcH/9li3I6bfH73RTpk8P0XZhk5umTpa+3gKvSEUrOWfCUcKgLpcbXsjGd\n86p8crVIvSVeEf83lYllaWCJFWXJmIZ3tbdj1Qi9HuBQIo5QjqFx6TTvLgke\nQcu0B3tRmQ9W7VO9R08CMdxZ1cpBvD/yxi3FXl8JxqQpip9gpjvuPC0haWoA\nfY3XLxvUhcmda/3HQg3hAE7AfpxlxiJ9F9Wm1mStwB3fxyQrv75hOgkfmEYC\nWxpLU/h1iWMBslfar32uLaCOD3Dlt00veu5vEtlDjmC9A4AHLAd3QKhlOvSr\nOVHX\r\n=JqI2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd5J38FTQM3wy3iytSMzlsA5BlRo3L8cXo3JEEmR9cPQIhAPn/J/MyaHFasdNAqXc1g2XTDw+aLSctb0+vN+EOcXrZ"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.6c21f034.0_1602109831508_0.9986617303351653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-button","version":"0.19.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.19.0","@material/mwc-ripple":"^0.19.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"6c21f03466ddd0381aa030eeb2fd8f9615a3ed73","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-imrhG04LYde2WRloX2tvCK2AzHiPxVn3GhK8hbG+p0ffTPmev18JsPZNSJZj6/1XLlqimMLNO3CsJIqyi3XftQ==","shasum":"60c2f57752b7b2af7a7d655bb12c46756da9255b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.0.tgz","fileCount":20,"unpackedSize":78833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkIxCRA9TVsSAnZWagAAcfoP/R3fEmqlh+H/qTH70Rx6\n2SEzaDkII/e3n46ezYg/wYYf5M+RV4XWxezmwiIJkCjeqFi2fhtSwhHFFEHd\ncDnmwE5/uh5g/1QoqwKQR8t9f8oWwlicCOBvEw+nvP2GIatTTlZqKEs84ycD\nL16N65TmswuYyQhzuheabZekaChLJdJt3m5UTriDbf+X66Nk0LaMrwTlEBAp\nDkH10X+iiLuMr+Cs8uiM3JZoWzFiuESwh1ZgI+dW2rC67fvGxweiPuFvuatF\noHJEGCTWAI9FIuxe9eLwMHqVeSSQ1OCk06J1c+ENB6AMKF+lS5B6h/NKwCKZ\nDN4qwq4Rim3o2bmyaAytTMzCscVFkzBc78avgPztkI4N4V2hKAld5Uit81GZ\nv85Kkmh6o4QeKy4iAbsR89Q0sawbeIx24Po35QKutnwYgPVIF3CUuUPwevin\nC3p9HfvZS/5yUX/bGQEBOVq91ukvgxs+E+x98GVss2OpGt6ngMqFYf/+fgus\nUbsVY3QFGe9CNRIPa8lIDtaEsSMDklNXcPwnLjI9QM0iLQgaeUOBKgJjCDTd\nN8PoJroHIHmIsV47DBYAJp++wGhpSwGjmYtM8StzM4flw5eA/q6yvD5LH1Qm\nIRzf4tq7vj0sTpAx2ZMBV6ASD4nJdttU7MJpJTaEeilcda9xL+ms/KTj6jSn\n0k4g\r\n=Bjcx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtRrk12tduxKZUCEXN58M+ggADXJ6dwnU7x5XtD9rvIgIhAIA4Hyj721IXcCyy/dlDh5rIWyQVZzV6cOrvywk67a6L"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.0_1602110000540_0.1731790587347921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-button","version":"0.20.0-canary.1f026aaa.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.1f026aaa.0","@material/mwc-ripple":"0.20.0-canary.1f026aaa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-3tiEgxaHB8TUC1tfQNSyB3U1cz1E6j+D9y5y5ZUcTMV8iL73M6I6v0r4FqrLLgLPjunQL5oWWtPPZBUume5FtQ==","shasum":"0497836588a759f4efac89d335ce5776e0557c0f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.1f026aaa.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5h3CRA9TVsSAnZWagAA6AUP/3sMWcpRWLvdVDaFWID0\nBHSbebBZO3vSL0xs/AWGNyjzVLn0fYQwe9mlc+rRN3Z/HjJh0+7U042yn4d4\n50kSuY5NMchnDHJOH3TGIwf/HAoSdmY9bIQYYuQiqT/3is/pa6ENA4jB4naT\nOxbZMJWQpLSLhyMvz0shC77/zIunj5FI2VkoknUFTrflvvr5wMh/szd9md8X\nh/kLQRZ1kd/ey818Gi54qjuGASW9K7Tn39SBEyxIWaOuEDLINL1quR10lOOj\nOXvQb8T0XdtcTsRLAb3UXBpMPqfH9B5mP3dsnCdA6QtdKnHFs4CGo4ppSoFf\nWjDTjNnaRTvDK/3VqZ4m9DKJCGppIiPRidyFLCybWiA/ovFw63yV8jvVF1nF\n6gStp8Mi9Y/6JKWVwaz4BBklJTuE0n1grmQUFhg7KCGornMB8itJs5HrNlU8\nQG4JCNtXerpoEFKBlOFKDWupp+5oKP3ThNWsuA856lY1JBlnfe8zs0BBiTk6\n0W6PbWantHLd4C662WdleZ0QIp+TSoemuH3kY95Q7xwnP+cNIgGCzJk5sBJf\nmBdDHv17BTvGRBYtVrRrEn32udGrtgb7bVoLCX0R6Z8VTZ1aasILtNKxtCPO\nYcFJaZfeK/DdeEoof8aa55emJ7D/JklpZYZOKQADi+i0jH/SPHL7UQPUTsE/\nQSOC\r\n=39p6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzTsvvuwcDsJD7v9DP4l37kP+6q0FvwJyU4dVzW0wLQAiAeLlekidMGrwacUf+yCjKSqaI4Q3lLw1HNI1mcT1DCtw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.1f026aaa.0_1602197623126_0.8968425739596091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-button","version":"0.19.1","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.19.1","@material/mwc-ripple":"^0.19.1","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"5f6894b191aacdb7da61e0e9f91bae96169fb190","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-3aLW2rbV9dp1F9729Uj/2CCY9j6um5OOa9p6uTPOQ29w7Z0u0yvKv2vJ7a/eZlKZUrdR52az4SzsviVPz7918g==","shasum":"96520d55c265e9c672ecb97b5547a5315cd4ee0d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.19.1.tgz","fileCount":20,"unpackedSize":78833,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tUCRA9TVsSAnZWagAAc+MP/jYD6sG3pfHd340SSC3x\nJKa9vxlCET96n11vpkVXG5tdlolsf+VMXC175aGs3hp3zk0SGwe+udJoyLya\nuDxgvXh0VVtuNv2ayyA5B2xk5QS9MrwBh6Hz+zvhpWxDiROjqo3pwFzZ+4yA\nXvmAEqOMMqwFTpkRuOobnIMtodd0mQUl+sti4DLvMA/ZD23MIRoA8YVYKDWz\n93UmgRxdmZK7qYJ3i+oXlIBIiAsdT6xMdQftE27DSCMxk2GqPvqfY2bJ69cr\n+GN+myijZNP9lLCHLPmeEyvjGOdoDDT+jpI5gi9fMMBNHnQWDvQci/C7PuAr\ngrjUz9G5YOEACy+i2YF7npT2mD7k0gEMmBit4lFuXqIQ0Ti3hDw94lj8LpEj\nXKcw4mtEGLw8l8A0+Db6NO9jXsNS64t8y7+btlf43pCb3sOcBkuna92PIdM9\ngUHqk43j/HRkhB298UUnPSn28QiGCa6wMpm3cMjMJ5F81SRaHLNz1X0pOfFV\nEkiuJFssl4fQ3TQtPIxtJ7KzoxsOOclgnJz1A46KthupfxaE8HKIxObvXJfj\nxNKXOGgfxckxgkvZDaRHkSMJHiUSYPZM7sqAxTzXyBkPTGJFqWy9PzAi1GRW\nLpE1crhLLY3z1VKPnGGx2WSjEVEgVeRpaCo2bWsXzwifh3yiWVc9Yg3bjYdf\n9aL9\r\n=J2cH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwtPQIKtBmTdFcDqOZu39e/sx7Xg86+taEZYhgQwgvhAiBSxbCbcF6HySOxNHityngMzzPfOSwUEL6IcQkpxn0jIA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.19.1_1602198355795_0.8222894157301408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-button","version":"0.20.0-canary.5f6894b1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.5f6894b1.0","@material/mwc-ripple":"0.20.0-canary.5f6894b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.774dcfc8e.0","@material/elevation":"=8.0.0-canary.774dcfc8e.0","@material/ripple":"=8.0.0-canary.774dcfc8e.0","@material/shape":"=8.0.0-canary.774dcfc8e.0","@material/theme":"=8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-uiLc5sjX2yrBFzTOCwJ4sHkfammYwGzrv20SGnO9Y7LZTgf72eTIf/LLUHzzt4PdVDCNQM5Uy55wbRDLxnfjJw==","shasum":"ab437036e39906081d29b6a0825e961e768d644b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.5f6894b1.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5ubCRA9TVsSAnZWagAAJ90P/0m7o3EUD3BLy1nS0Pcn\nHj0q93aklDWbNKPt6vYpNto+XzHtuheuHGTCJsDC3eF7y2TPwUncSOeTh+CN\ncLtoOlva34jg93dPmRjFl0dxKEUXjrOfJAjUDncAQGVrNfE/WQxQQCQSkAtq\njrtNew8Qn4fyeLRu0rIF+OCtEh4yxcY/Jg73Z6nrhjXdBh3XGHayBrhNNFK3\neliTeZkW+8v7oC37tfi1srp+xCX6kwVr38M4ztXb2aB04H88KveKQ245ZxV+\nQ7IHjD0risyMlEbIbOGKuUfI3BCWLAzoGBIdFLsdI74coEKPSO1wcLuA7M52\n8dWXuG05x69KqgrSbE3noGZzKrvd4HzubNXb991CrsuQ8b9fjtI0KlsyF4fT\nMejse7FoQcye8C17p4UPg1N1klCd49kIN27X726sr/CKmma2FjVXS+3Votkr\nJeO66hLV0qLHpq2a1le8+LepZnd9Tzg5l7OXncxyCQkmDsXqKKVwW3N2EU7p\nuF6qvm5GwsMj9KMoczGBdQth6WulUI2PmRQg92B3CmDkdR9RC0y+Fwp0nkCD\n+CEold0nQaIbdO3NorDwdzgB++DEv3g076vkv5s320XQ6QSSau00CjWEDi3J\nVhLKXKQUEzMQlAqsdflrzVgeEEqYuutQpoP7FYyrPKywVtMjBe41hRLPbN1q\nTEWz\r\n=K1Ue\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFM0GXTBv7RD5OCkrq5gQ6d52eg+b+zYXZtnt7OqQFyKAiAedBzgyrEwhsa/4nsF5q6IRH4L6P9yHBoutL8ivTbd2A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.5f6894b1.0_1602198426849_0.08224789808840116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-button","version":"0.20.0-canary.f6260d06.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.f6260d06.0","@material/mwc-ripple":"0.20.0-canary.f6260d06.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.8a39352c8.0","@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","@material/shape":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DT/HYiICfILergEwem1FETiNssctoCjyLACiGYBKRhutIhSWU8ERRnL2AGM1Uo5OjCO8PvX9oa2S2NpgphDuLQ==","shasum":"70829223a7c86f1da90eb1ab42e2a287936382fd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.f6260d06.0.tgz","fileCount":20,"unpackedSize":78885,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNnrCRA9TVsSAnZWagAAHH0P/0PjxRSj57z16behnmDS\navtQZX296oepTCCLmzypEOObyvA5auxKuIxtO59I3VFnqpshGs6MzjBBzSj6\nlPfhN5fmLfrEOHQXCgeTR4+yP/y9CzBtpMyrhlnOz+LkpS+fbkZln6dVpwkD\n7lZEG2RQ9PpzeQxfExkn20byiyKCvFf0gvtr5ZL8WMQaEdLszR0tJUmoQFkD\nYblO1jMlkS7KkF2705behafnezFGCsLTSG0+fysnYAHsFkveCqUmhVu1YYPn\nnvxsb0hZCjwl5b079xuV4zDjNA84oIcXWb/gEamW3c9/xrpES+oGdYwLyg8D\nv7rWa8BMG5bk9tt9fSiHcB7Uj7152EwjDSuvqqPFe9GXT3GMvSehvda/KKMX\nT4EKBawYSxFMnkdq61tWUDjYc2f/wpNEheLncPLtMYIdgq3GWpenhJ/bpaLD\nvc/ucHIjzzsv8pFB3JSWzJVAz2Bjkd1Gq6/o9xDr4JZ4LImQCn+/1f4b08tC\npHcyVbI7PUEmM+aumZ56BlyLjaQcPMiQgLlynkyEQRJTFQSd0CHJ9L8FAYyR\nyP6DOf6WeJ6JKjN3Qkq72TZjuf716fGdh46a/XhFZbTGEYdCVAhY4l/jwmZw\ne+HBj6xCiWvrsxGbZR2i2iYZY5mA6GvrIwZRvnm43QJbkqmU9HAfabR2uZSw\nrS8k\r\n=26Nk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPatoOFcO5KG3/MYlIkj6nFzaYk9NsCwi1szepZhT4FQIgdF2x3Sk1H1q6dmTnEr38wMZuLnrCbf5oaUbHajnIf+c="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.f6260d06.0_1602542059522_0.7166486263532736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-button","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.2d1b08aa.0","@material/mwc-ripple":"0.20.0-canary.2d1b08aa.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.8a39352c8.0","@material/elevation":"=8.0.0-canary.8a39352c8.0","@material/ripple":"=8.0.0-canary.8a39352c8.0","@material/shape":"=8.0.0-canary.8a39352c8.0","@material/theme":"=8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cZ2rIhhaS0ho280gl5Qwe0DZUQCGyHPvLDm1vegRRcdFCzM+Ef64BjGHxVZb2mS9j5Ty8rDe/ZOeN3eX29QiAQ==","shasum":"163d2e2171d442da4b0ad42f11e077da1c6463ba","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.2d1b08aa.0.tgz","fileCount":20,"unpackedSize":80051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf5kCRA9TVsSAnZWagAAhAUP/2VCQkWHg3ngYhaEwsSA\nnIm/PI1ZbQX4SAOaQXtTDwy6qlAnkLI5t1DFfMa6R3jtUP1/5HvT1oSQu21k\ntgpLX4JyPb8Yaqfs+RFJywIf2vPMOPV0tF3H0a5LB1J7FEnA4p8EAomJSopD\nVtTvaFxlFesbjNxBD2WMqUFIBrQh/ftAN2hpnvEUlR+ZAgPQafiLDiVwUHmC\nwJeltJvZwIUUsGrD5L2eDPM+3YGg2iSpLgieoViTFTNvlfTCyyh+6yf1ZJ64\nKdDOHet7TRl2C6czXyCX8iVDuUc3AdS0wfcZgtejevoFsVdUk/TPw7PUGJEF\n0W1s9NdPzT/D14E12OxNGqjBmOkjvkzWLdZJQmGgb4hiYL7/u7ZQwydorolm\nDYz07DNEUf2tALr3vmZGDXsqzNIQE7MfQtsBrjgAkaFvTBXWTjYdADa+Os0I\nQNpLJ1dmLCegeBi4gYAZnVQntezMujnqJsgRAC/qUgTQauIohAFsjMTAaF2V\nC7dVYIknF3ggj4BpJ8HEBAY8wBvTfHDHKSo2t/0Yv/Z5L0x+3k9L4jSwkRlY\n/WGPsKXv9TErViPLDbDAqkVeyprLJeG0Rby5E7YLt3rZiBYgz2U3/8Vim+k2\n19PikqrkJSj9oEl4BjbAONl82nX4hARxOg7zf4F8WuAWqg47XStD0JeXAEN5\nQDDH\r\n=IIWP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbY8VscTYsGhu/ut1XVd9B51WLjxNMHuYq5CUO3OC/WAiAhR8kzhGkD8tP/XbmRnYm9LZPS07GWc9xClHW5y8forw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.2d1b08aa.0_1602616932422_0.2539333723325208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-button","version":"0.20.0-canary.5bd58844.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.5bd58844.0","@material/mwc-ripple":"0.20.0-canary.5bd58844.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.790ca85fd.0","@material/elevation":"=8.0.0-canary.790ca85fd.0","@material/ripple":"=8.0.0-canary.790ca85fd.0","@material/shape":"=8.0.0-canary.790ca85fd.0","@material/theme":"=8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-zwv/+RCu7wB/RqvnNSRHW5fT2ty+ASmUnqve9bAVVzBp593v/FS36DTEcW293ptEHcGkBPrhvwVNo5ly+nXj2w==","shasum":"223c58268d667a361a62aae53e37538eaa27d08e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.5bd58844.0.tgz","fileCount":20,"unpackedSize":80051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxMCRA9TVsSAnZWagAAaEkP/RjFXv5l/V8QOXX7G9XG\n0uMjILwP+ofdTmYw7s8Y8OcYySoHEV9Zn2hau/yQrZ/A1/kSJMw6BVw6HvC1\n57rxZbF8qI+zuw54cRaLDVmsh32TgZh+t9IOKjwMbmGK6bwHO8vshYXz3uXc\no1scievxUoizUK2uGkfj2yDaX7o9PzbTyW156c0VYZfFc4FEl60kBDkuVi3s\nGVYuUNxujZJlGNwpKseb4WWQaOQQc5F7cME3jPCiaNv02oUl/ENyVQmcDQi1\ntEtyn4xi3BMiNAaren/ssZSkIvmAatH/i4RYQXcC3C051+0hX00aIVyEJlbt\nxtWGPMWIxszT5NWsmvbApS8QUOqm99VGfA8sJSLDj9XKFTHtEQi9tPFUVvFR\n4c6l6GQtcVEPE4vQck9vbRFnxtHn2ESp8Kfmuj1V9MezjCYagHh30JMLhhzM\nFqtwA2RFDa4V9nfCzcsKH38IwOfP5+ZdP9I0K4ERa1k40+RlLUgfNsAtvY3r\nLChNC5dO/ONf2XCvuSdiv9wQ6DLA4UIxcy1FMPg6odKlMR+lQqdJ2qIDPQj7\nBxf6kOWFkFkTFhgCC2Vz8vIT1h9FXC88KxgzhXRzwn4mEofGW+rsMBAw+u1B\nvlfYofYKY9Q4CTyfzWQLIkMEuC2Xuxmc/8BJKxzlOdW/jMXY+DGBxjfU63c6\nmHLw\r\n=k8Js\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMTtn8sAbFZ8oTlsiM9ug+6FPvmmjWFGG/uAD7ASHDEwIgchTj85005lrGhZzm9BxeolyavFpno6/FUC4NkQpii+E="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.5bd58844.0_1602632779550_0.7294659184615309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-button","version":"0.20.0-canary.bc846b29.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.bc846b29.0","@material/mwc-ripple":"0.20.0-canary.bc846b29.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-94toMOvrGfWJTFheeAoHBpJg1gTx9IIcCXkStVgfHunJC481Z2omIyMrSjXpdqdwMojKu4IKtf1QZKsrQjKXDQ==","shasum":"05227af3325e4bf73ab214b5b1d6a8a2d9710363","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.bc846b29.0.tgz","fileCount":20,"unpackedSize":80051,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BYCRA9TVsSAnZWagAA8PEQAIWvv3qtbRXqdl1ySB8E\nfFAeKNSdq/1gvo9jF5qNlLdful007uGSFYrJ4BQG/btmW4z83jnODtxFPpTQ\ndi0uLkQyblIPbrzbCr3yT52zqriq2CN2wUeg8ORbJOPVd6b/mNQsJXWBOVv5\nuFCjzxp+zrwDVFbfE3CmrdkZ+p61e5B20LX63uamSpKa8Lrw1G/bixeojMpa\nKz6cBlpgHxO3XWWPueurp7X6w2+UOZ7UOKNmGUVfB3yyaxupP+wEEERJJ3HG\nIv2rAIOv0kXdoohCBxLHx9x1yz/+C4WsRAZYLqNfSRnnBACpb/NeAcfl42AC\njljF/xlG/gJuDFOr4upcM/UHCgmi3SrGjmwYkzwbCGZVYbD2Fu5dFIPOUBC7\nrL5i3wUy7cZwppbakT1KkVKbGlnRke3nxSV5vqIYAbLKiiEKqsdmDqvEWx2S\nTXuRdwn/JtXHHgtcus/YyppxzGeBbZRVfKDBYCB3sk6rQ20Ft/ZbCevxAqZd\nkbGTd+Rihv70I7PUci7VhaYrftDVZnDr9apUGw31gbSbazH8JXy00WVSk+5E\nmowJ0p1Ey9iVaOYJMl87QCxp+GKdoHwwIrdrAhF1GVefT0sXbuqiyYZ+fbnJ\n3lyN8/KEXzVHBEKBjtD6BXdOcQ7S2yzZX2wWLb8xh+AbuMzHciypBiGXf+tZ\nSMvD\r\n=ZAZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/R2JHoo3mWKA7K3skv1VU4HxsCG58VBAwKJ3/r/2KKAiEAinjoRn5+Uy6AP/SIaWe91OHdJJJbXUFGQhd91YVfDpQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.bc846b29.0_1602699352099_0.8582732239691935"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-button","version":"0.20.0-canary.3280b686.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.3280b686.0","@material/mwc-ripple":"0.20.0-canary.3280b686.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-odiV941E7ANSMr6nYFDZ+kaxUtukAn1mxJVi7nkfAt/6Aa6ecROX5CiMtWSnmMHckmYvda8y3THIl3HfgXpxOQ==","shasum":"e3aab3be637c3ca3f258a17e146caeff69559333","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.3280b686.0.tgz","fileCount":20,"unpackedSize":81905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOOCRA9TVsSAnZWagAAXSQP/3Fr1B//SnRy57Now3aB\nm2yDd2BUBxv9+RRtlzCkhtP/Lz1aacrbgQMKNEnopBQJnfAHP+ZUA8/FPbBW\n93pHMHrupVKsiIWoh6Floehd7IQuGUMJa6kSyoPBSCGBws03FlBwXKyqfXeK\nY8WHguXQgPcwRn2BaGny8lXMbJzJfPOyRo8QINWWRnYop3itDKZgNX1BVcCM\nt2lMZVLq72GvsZ6krIrMSnTStK5DeE9aVgHahocnD+U9/hWjPQd43uQzPNt1\nvZ8e2P1mc8DN8HxyhJxcVIhuEPK4FikT41A/MxUnZzHZeIcd9/fKg5Vz3q0X\nVQnCUVdT6vr49lb0KmcnLYfN3Vxd3C64MQkpXizc+xAFogDT+mVK/ujxxkeL\nKW5Bj2ZOJTXkyEMyR8vHTetoKC+Sg5JYNH31r5N/4pWFcp6kLiNFgmXDMgnf\nIuxQMDSGmmqVgvhc6ltd7NQ5eu97CAevgfSRFVxgJyaODZMZk44a5Bi/c2cd\nxih54fFnNRxXrxnbEWSzRdjzBfKQaBdqP74lOOsSx8PWNIdj4dG/Sdl3rBLE\nJeTlZPyOmq4vbAy6Aj1DU+205ai2XRxpRlOFFz0+G7zJOcXDxvY/X/OdhkgG\nL7SxXOCEw1ItIe7wP+xy3SqMYhWjZ3X3yFfZoAUQezpdChnh/T/xijoiu1qu\nU0/Z\r\n=oJ+Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIES5JabJuC3wRL0jp+j4iYQca5oNDR/zFbz6hnLWcTmBAiBpsuUCc6lYBAR0xPqOsBTmFL7HcPzfhGiyXC+PT7WMFg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.3280b686.0_1602806669970_0.6730834822414276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-button","version":"0.20.0-canary.9e94cd38.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.9e94cd38.0","@material/mwc-ripple":"0.20.0-canary.9e94cd38.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.c71ebfa02.0","@material/elevation":"=8.0.0-canary.c71ebfa02.0","@material/ripple":"=8.0.0-canary.c71ebfa02.0","@material/shape":"=8.0.0-canary.c71ebfa02.0","@material/theme":"=8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-oKZXXYPgaOCy8qAsQ3y2kzl93hQsKi0WKvbCA+Li14DAsG00JWNpURKVSi6AviC2/fGMCZcYkKD/PDcHnUdZAw==","shasum":"f8cb804227df2d31fb7a9d236b667d377a01354c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.9e94cd38.0.tgz","fileCount":20,"unpackedSize":81905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig00CRA9TVsSAnZWagAAnYUP/2A9fuvHdwdaRccrxbU7\nYvy839RvYbyitOFIesAJpoFHnhLCDAPdTWvSQxHsOEKd3xFVzcVtBaUW9FTL\nJZEMb+Wxmp8cBGXAwZt8UINyGamFW/40ctvI0PlGwc8Z66nGrgFxiPEGe3fp\n1bLGJWo+Gs9WqHOlB4Mip+WTeM0M8fCjRGgKPb5qiUDw1OhtqoFsmpfu5PEp\nVVKHvKDUxDhC/JZNVuuRnU8vJu37TLbQ3I9EqxRdqbUbM5zbcUzYh7XpZSIy\nTrlOz3jar2gZ1z2h93CYixj2LFViczGd3FHgHK1rqD1xb5U3zSHbBysao77X\nZtwcLa7iczwXMbu5jXrhUnTkCCT+CHG4tTlq7VhYsSLBux8CBJed72ADpbFR\n95Y84sUqgXGlfVLw3+k5wi/DDXhH86jfsJ4yOleg54XRIcQ/XdPAHayT55LG\nheR/yAX6n87ZCSVuB2xke4Zy8y1Bgi/yeNCC6p9MMqDxCZ3rinno+eo9wGl1\ntQVtlL5IY0k/LBG8ggCZkr5WNtpsDVqps3HIXV7DzRGvWsUkziFFg2PI1vVx\ndxxy54KDdh/D/qNwuW0ruDSezokZJcihWA2Kqm19qrD0sDmujqJVYi5kfonf\nDx5+4sAh/NbI/piN1LmqmrxhUMmKjcyRSqGjKjn5M1xKxwWpggp2DCoZpkLb\nascC\r\n=IHDM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJgd0PgguhNZNu1x6sfqm04V+HmqgB+gTLTk5PFwCNnwIgElW52xrqm5ZmPKWAeBRUp+5VKTEt1ILDRFjwpB5kOf8="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.9e94cd38.0_1602882867703_0.7121906840522882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-button","version":"0.20.0-canary.4773c773.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.4773c773.0","@material/mwc-ripple":"0.20.0-canary.4773c773.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.2ab716cbd.0","@material/elevation":"=8.0.0-canary.2ab716cbd.0","@material/ripple":"=8.0.0-canary.2ab716cbd.0","@material/shape":"=8.0.0-canary.2ab716cbd.0","@material/theme":"=8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-K6L0iCWfP7+QmWAqpJ8lRrUDRXzxYBfv7mdZUR+LFqX8xwCI4RKDClIiyd7FSPP0unm66/7Sj8EiUaUO30uATg==","shasum":"53a9fa6789a8706f08aaac3a67ddafa685ca82f3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.4773c773.0.tgz","fileCount":20,"unpackedSize":81905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/mCRA9TVsSAnZWagAALJIP/0fyQZZmsLzdej0Re8pk\nItV15yFlhpPDtYKn9NTAyes5YAMF4wThBvGagYliVHFUhoXM3OqJHUXzC4pm\njHNZeC5wDOjra4ujYHKjxXXA7uRE6aIzPldUAI3iy+nmmdS0ZIW9IPIXgqx6\nR27J77DlDL3UUgmcx+Qzk0pe3OM/J0aOizgku1E1uWGcqwPfPHJtWE+GmwKo\n0UkfktXHbPM81ipkjhWTuRTMUBYKgj6PZjd6bIY44Ry7zMVVO/cxHNfjKxRD\nsPAyFuioxun69YOA3AHAwx0RoL8RGqG2V/tuAuYzQJ0sTtSkLHgWum43IYJ2\nVrGf3ViQ/rVHW5FRWuAIpTSrdXPp4sfWq1MT2H18lGNRyjseuCJc/uuwsUDF\nINXMc2W0D0Anzrmu9xRNirfX0DT7/Oi+wAncssNBwgm2zXRVOx7krbY0eXha\nNSWadLNFlaWe+Vth82R4Dm/5n1Ez50+aFFivCsEsqq+qOs/tI4c9iimPa+5w\n+UPsP1RYkHVy3rGqI3dpRo7Lg6+I9W5asN8A40ldikJ5loPE89czXQgAYEw3\n4h5E9ppojyV2qYLaZ/YbRwkwSVQXp1N2+Nq6SeVt55V6QbUjN1DyVpEiizhU\nArNEu0FCgKx8kIZdVPXio4zsAzameu7KU93ez9eNBChgxr4q/GshZ6VqeOQw\n5gdb\r\n=Wv/J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7+qCpx+QZ2i1BG/EQ/xACRTQr3kXD8KERxtqpIfONjwIhAI6+RNQI7X4sMdriYItwOCvIQWpooPBzXLktrEAdhIBV"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.4773c773.0_1602887654190_0.3289635305064311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-button","version":"0.20.0-canary.65787913.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.65787913.0","@material/mwc-ripple":"0.20.0-canary.65787913.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LPTBeV3xa2f5didwDbAyGblXbE4dEhmvlI1BOd3Vu130klOS24Rz6l9zvThGQjBmG+MPNC5bC0Be+pwyY8N0pA==","shasum":"efad0dcdc9b558111549fee60ef8c45a94bd8344","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.65787913.0.tgz","fileCount":20,"unpackedSize":81905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAVCRA9TVsSAnZWagAAxRIQAJ+trf/c2Vzzm5lmFMaV\nImc9YjB9oCkrw8VB+ikxhFlpm8zFR3rKnoncdB9A8tOAr3H8du4fWrLV5XIq\nX7lU/LvY/tmkCSnBGYHV7q1FZ8Yb7RKpvnp8Ya/WGi2n76ydTR7Z8ozLoFbq\nL11d7ROjvaWAJlEGrVchoBZnu00AVI73H5FMhPtARr7RkQSIU5Fdi/Q2OhY3\nYkU/+yc6RI0j4hoyjHvV+V7cEGG4tglZBAtOBQIhojFgCYjfeAcAPZd2o9yJ\neGjc8xne9B4U3RdWERAyru014ayEokMVJlU4u1WWMvyrvJs/4TAG/Itc4p98\nmSdr7j5T7zsrziHSNz/ophnnam9HHTK2gUwEQlK/xNgHe4n3Od0GyblqsTqM\nVuuvOtPmu1HgPAF5taNsbs00gbvwnhYWkWZknd62oPY3aKHSHXKz3d7MbOeJ\nWAQVlCgLw0erHVYC1akAoJBYfnn7G6bhBJ5EfzF63hbZX5FHMQrY5fbetAv4\nYwfvFrEIua5WDJfmlSqJs9hlYlRv3MfMYTtLwwdAdfoMZJ/8iJlzdqschqkc\nFv1Okln96z/rKGztiOPRXtBCVIUaCfS9EGIX7sw+SFWiZTSeqonGWV1LW80H\nswEtiBKb2bzTK4/ySoRK2hgq4cAP/9EB8uHEl/jKvJayCPLtyHD/qqT7Kv3X\n5qXR\r\n=VTIz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGuFTTo9B9rm0eJGNTV0D3o7lKJnMD47lP7vSicnvTneAiAhL7JWk+BaIu3ou/t1JF0dS3WfUbCut5te3OOUTjUbZQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.65787913.0_1603133461039_0.031811329109858066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-button","version":"0.20.0-canary.5485fba3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.5485fba3.0","@material/mwc-ripple":"0.20.0-canary.5485fba3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+y91d8GGE8LxMesjSMhJP2GpXgoqDBFzX0eiKhlqOewigkQYEoJOYt2N4+I1UQOg/e1ilhs5R5AcsxSNENqfpg==","shasum":"ef69d94c2c453eb7709b10c7f18d6fd86db14633","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.5485fba3.0.tgz","fileCount":20,"unpackedSize":81905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgP/CRA9TVsSAnZWagAALwcP/3HLOPfty89ECiNzQ0eP\nBnP4UYauP7eKUXwv1rR5vr8VZKkMWeBW450+xCghiYe2etqur3wk3xOgY2IR\n7wh92TC1h00u1w4Bxu17CiIQ2inh/g5sJ3aweurZf3Kek2Jghk8o89oRXX0I\nqeWaISMCcQJtislUPA69hedwI/pYQc0Pbx4qEFmajE0hJB8FGEb0z2IVUCuN\n4LYY2kTEkTusSBCEAzWy2oTjuh6XBja5+ogPpFq+XRcAfkHjBSoDx0QDsSRr\n39uaoyzzfuH2s4ZOSsavNfEWVv/yVR1gIZSbBwUXz1XR1QrHn5PSzoXZTXZ0\nKn59KTm/BFdYEW7YWSO1BjhxcfA+EthlfYT5VHuGke7sDZTDMRc+KfdUb5JD\nKCVkjoUjLvPz8LHzyL1+w/1QmJ2XBO7rwg6BspP07fQxdD5xUdcusTXiewR9\nLM2G0C8KGSDFQaPiEPIkrJALbEVsWSY5F8VP+olM2KgK1i8nPv1lwcod2F9h\nrWpYF6x0qNf5eMcUHQ1eMMkXb0xnBHCx02Wnl/zFpjK4AYhphDB+0GB/dP5S\nXx6gszQFo5nhLSTAvu0vNNvYoaYN/EohgLvRGoTq9icFetc5oRBlp/LL8By/\nrG3qwRIP4PTdkXZinBWtaacXASPV55pWm6Q0p/Hx/wPhwqAsODinM7X7/Ev8\nk9NB\r\n=TE0B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChHqAy9ujb0RZS0VWp6kLdSDnJi7TW7hfWnDSQyyAn4AIhANeQIqndEcsx/l4mKc/mQXtRDhldKxEFR69hYhGdOAjB"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.5485fba3.0_1603142654649_0.06804661896303377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-button","version":"0.20.0-canary.a39d0a92.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.a39d0a92.0","@material/mwc-ripple":"0.20.0-canary.a39d0a92.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.43c1c5e2f.0","@material/elevation":"=8.0.0-canary.43c1c5e2f.0","@material/ripple":"=8.0.0-canary.43c1c5e2f.0","@material/shape":"=8.0.0-canary.43c1c5e2f.0","@material/theme":"=8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-+aCLBnnwE0g8IGTdlWC3vs39SbwFQCbBhbujuKdh//g4WAyvt3zsaxPxOj4LdQb49GSvTew6KcOSnBGYmYIezA==","shasum":"5cadfb78d7c4712738c919791c6c0ebb8d05b87b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.a39d0a92.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0nnCRA9TVsSAnZWagAA2x8P/RQIRHJ9l/7lcK6P27gh\n5OzmwNCjPpF5bZabhOjLHn0FmQSBAk0YshzFvi8fFDiK9UOyoGJ9ljrE6RuB\nYbgeeB1gzTRk4CRacNvheZjUt914xfwub4/bgPhyD+hH3o8HWvfA/A4djezK\nyGkmddGtTZonuvS+B9WWAtpIGeIpcqYQkLMXtjY32YjqYXzTTViXGxN4JA28\nfJ3Sq3mdq7diYrknOpw+cfg2isjiPQjGOSYwjZOX6IIw+144K4292kPG8KgB\np0gcumPE2CN8aNwZstlPnWoY5lDZPfg9cYnSW6oazOAEHbnP6lrIIPP88PHU\nwukSbj3ocIbyj4ComTBySqjb78mVwicj73li/nxgh+ZCcXoZh7qYCTbdM5WU\nu+Tme9k54Rsd/6c1pHtFb9d2kC03Xim66lXUuKei+BK3/IPw5xXkYA8P1INg\nZ65PvSTT2WaghHc2UxU6MIS+Sc1YzKEbO/lHYVnaePkFjNNFTB5avuh19KgJ\nhoYdlKRpfDEe4+Ovif45b3KYriLQgS67h9LI65B+W7O6RvM7O2VCkwcF5lO4\nTrlmHgP0CgPSOco94zsAfjFHAyGdDNzoLbolMNjevyMygiYI2jt14u+8eaQ5\nGZVliNCxaChzs7XUSs0gaNE8nUH+BRTj7EHs8AJ/Or+gvYPp+bllXY4O8L7w\n5E2t\r\n=WGf3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfK32moAXX0wV8HPIrbxqv2FZVoKKtyNhYBgB/DEJLTwIhAJ2ff1HvETV/4DKMGtx0HJbjUpR9iYV4UzFmOClsgTLd"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.a39d0a92.0_1603488231180_0.2686502244272915"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-button","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.4eafcbc1.0","@material/mwc-ripple":"0.20.0-canary.4eafcbc1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.ccc64eea3.0","@material/elevation":"=8.0.0-canary.ccc64eea3.0","@material/ripple":"=8.0.0-canary.ccc64eea3.0","@material/shape":"=8.0.0-canary.ccc64eea3.0","@material/theme":"=8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-6IThqk339KqqyeeTX+bXbg+IkLjdWJftRIb4q3Hvl53pNXjsEN0paz1yqIkpNQ8lsEpWgcQslBysSl8XMtabKQ==","shasum":"42e1e53f6a7c202b33e516adc77d3cb41d275ec5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.4eafcbc1.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3X/CRA9TVsSAnZWagAAuFEP/2oCwitll+6zfzRIgOLP\nWNsmbaDytvHYY7dVI2MygscnNuqjXkxN9Fu5baJGJfbCTsW3CAcfNey5hsYc\nwlPh2/qVxgoMhSFK7d7T+7cGa+qDzESFsg9hvlqCOR8rsjdkMdON9NrimoSj\naULQqt6yzay6bS6vfENvpstd5L97qK4zwJUKrxO3Via3Ae49+H9mMkQ5SJvx\n41i7GNWv2cBlGK80ZK6PQtBphwhRnsUG2Ffc7Q6NYQDfenzQty810PYVgjSd\nd6CczLTH0QqN5OZ/9O3JSzWpZ2fJEIkG0ipETVNLAxa3xkR4KmRHsBnzdMUf\n3x0UDZIV7bl+tnqYF5/fTVgK6csiao4cWVLyqKuKLQ++OvkXIdC5vqxYY64j\no5maGVBCe/Tv1V0nkGKQf5x8g+Onhs3rtRvwxGZ7BcqZ7FlyqJI9UVZbnFRT\nBN+u9rv1u5Rh2KYNC2oSi46KR0ANIf8IEYh263UX+zqMc9HPL6tHcFEvRgqA\no+db+h9QQXroIjWfWkgiVnqcD9wet0P8239uygKTLAAWWJwn9YI+BnYD7Q+O\nE1T28bkfOWKJgFEN1bc5pI5g2zbMsxeXtxX4LvUQbqauzZdNrTdIOAsThIP5\n86QeKwiybHVpEVMHIQ5wPlutp8YxeNeXPczOOlMvm71pSwVSXj8RBToYMEMK\nTRTr\r\n=FMaU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGDfYt8GeU8fHODq+c3UzxCFPTmRUYxZ7cwB3iKFMxwjAiEAxREO8chfV4Exo0UcnN0CqyPPmSazOF9wZ5vzLDT/wuQ="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.4eafcbc1.0_1603761662800_0.4859761030236991"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-button","version":"0.20.0-canary.32961593.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.32961593.0","@material/mwc-ripple":"0.20.0-canary.32961593.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a79cdd019.0","@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","@material/shape":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Bi3cgYCFDbwpc4SDH7J/Gd0R0z9OnmMyb2Ebev2G/kH7gL/kiNOzRVlnJFzRkJgIjBiZS/lq0EoinmDHRWzTsQ==","shasum":"98901c0cc5f9123740582929bba1e7f4f0ff0576","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.32961593.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL2uCRA9TVsSAnZWagAABpIP/0uHf41iXPicr4mF0yT4\n7OhagKolEeVq1g7mzOfd8rVdqbxBug1u6tvV49JcGqKbUw/Dp2vDU/Nq12xg\npYaN5rXLE8/rRcTdXS9+eOy9WgX81g8HiTz5alb05RXtryVPCGNVQFAtTJDO\n7pMlNgAY62dqhLzZKARwiIhQcT5Uk7K/M+5TaW+CYdLaM4ZVpkpkFvQgT7xx\n5ip253+MaWocwNOKuDZylFGsvw0mGOhFEggbOCZ5reLOpM/aW/cwq7aq/JdN\nrMqLxJEWX9ZMFAQbLLRTA7UV1LnOxR/SGhKESL3UJ45xFWqqw4AdmZ1fy6hR\nqJYEJ22H3Zg31tdWzp81C+qqA8JaLPUxIfZJCH3l/sF9GbS6mYXAknlz43RJ\ngYapnDGI2k4KJ7opM+CCVra7UKOFMmtqhe9qBTvPAAxKX3pNtef/h0saeJdq\n+kBPa2r1k1BTfRoehPFR8KGF8rdNg9/EhLkNCBwzyV8cYUqeJs+JV1Mhps8t\nGkGJyGEkgWDLmjkYyJzffDG0NYg50G9lY+kkj3b2mCPT5k1lsyCoSJVIq1Wk\nwoGYVSBGT5lA3aZqWeKo24YWxACubbZmu7tf4ZAQu/PvubMyBQJk+sonlYda\npp0M8omaF+KbFZ6CYBN9BXoHBivPbpJdhF9Pt1D4X8NL3RHPSHznYNhOrFLs\nKtAO\r\n=fARI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFxrFrzKehKb0erJB24yoZATv3VnNcJ2Ti06VKrjaYZfAiEApP5C9cDCM8gQ08U/o5VMLG/9QtKuBoSjX4sPVTIq90Q="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.32961593.0_1603845550135_0.12317029032339266"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-button","version":"0.20.0-canary.8e3a0601.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.8e3a0601.0","@material/mwc-ripple":"0.20.0-canary.8e3a0601.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.a79cdd019.0","@material/elevation":"=8.0.0-canary.a79cdd019.0","@material/ripple":"=8.0.0-canary.a79cdd019.0","@material/shape":"=8.0.0-canary.a79cdd019.0","@material/theme":"=8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-7ev3LmzBeokXk2vN6Y7XEZpGIIz7GFKlKGZJb53vmg+SbR8DWXsDJmxy7SjGLbhwYQSbXJihEC7MPUy8SORdAA==","shasum":"d6d6b93eff4f2c23a3de48ab8c0c60a3aff7ac7c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.8e3a0601.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzX6CRA9TVsSAnZWagAAhWMP/1qUsE60Cs4OJGFGs+1O\ngMI8lTggvEXyfxe5TnwzPFE6YhUGQoDA57iG7huSRTaJ+D9leZ99mE8v14vV\no7fxpDMq5nuRaevmqysvWhZxukE7TjyIqtra8kNqGeGn9XyBumwkuJ/r4WOD\naNK1P76ZEbmiWAqEp93FL7XrvM4UymrqtzVOn1X4B9UmTGVj/OTG6MW0v5Ps\nXxpu8G1L+kQJlqb6511Ybo2AJTHnSm+ywoMVw7nMJ+VbuQwtbnEfYQFrTyd+\n4/uvaDwBm2RWheboklOLtXvVns+WBLvGwMdoMv1f/Vevmkvvjs6lBzZ1ZYmF\nqSBLJiC9vFO2ZMd92xCJl5i39oo5VkHT9vy/hv7li15RJDgAoAG3AZJvrk8F\nTej4d6k1RdmOph5VHEUAk2Gv8UlBnPYtOOJnbYDwd7//zHewRBtixh5DjBhj\ngYHa44bXAsbNlH2u0ON2g/5Y1yEbXjaFouklkZ0v/G1YAK3zM7z5pyWxL6Ag\nVDa4T09UB50ydupHTHusHEMTTEmShZYyL2OTiE/dHoNmnK72BzOfJhjPeVGk\nwREF29vNNur51FwgI5lUu+i8Sj9YbIl0cx22+S+XL/qSO/JS+OKY9nckN2C6\nUuD1utueZXHYkpKP+la4O34Mfr4u1z/0smRUTmi75ReR6V3pDGiu5SbXTmr/\nu+zO\r\n=cghi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDP8Og/4jU0p8lxqF/zqCvJEeiS44uC7Je6Fw2OFtEk/gIgY82phWBJkfQpkMOQ/Jl4sNsu3Li2ZkhlRSdvr2nmbDc="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.8e3a0601.0_1604007418116_0.5674328703890315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-button","version":"0.20.0-canary.178c25b4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.178c25b4.0","@material/mwc-ripple":"0.20.0-canary.178c25b4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6d9648ab2.0","@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","@material/shape":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-mVxFK87DYkmYmieLThxNS0iB45al/UrSQvyxy/6ZJ0SYTW6KLd25m5y/coYnAZP74eST3ZGKlqcAN6pCAuRJ9w==","shasum":"54a8856fcf2bcd2ad2c8c68de6d207523308dbca","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.178c25b4.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzksCRA9TVsSAnZWagAAKFsP/1ufiHrBOFAwqbnKu9X7\naHZ2IO/8d5mwDAVCYyHiq72E+3laETiGPz9pGPNqQtacEg+ZogNY0eJ9yNHI\noJzVZ8SDFDxBtUWHMyu07XhSlsQOdsyQLiClLgLFU8YHJemFttPz3H6elBa4\nE0stxA+J1vAuk481YsQxKobcG036GPJgc1INhRWJE5nErHWlzGz22wRxhAsH\nmKfZs5Fv7dXqZmjGwCVfPjVTzvw5ZH6N6QI0AxLNVEGTc/E4Qsw6Y1zpMJTg\nS8Xnpqb4/MyuMMabYw50OXztGraN8q1Qohofmp6pQ+DrbfKpI5MdGQieT1lb\nSGbnu5sL4I9RdrFVcJSO/Jb+JZGF9Fn9hed/7Az0h1n47C1fk9AHHcPnUVZP\ne6qZEINbA0oANPHSGgT8YmxXibzLUNlwaytZPYGIuLlmPYuJtE5rKJzCj0zc\nZe70hZc/p3P3iwFXMibjBsPdH7zsbm3SPT1L2EX6Z8bqF99TI1oeuxrbxRxw\nHCzq1hlGwXlrXmjhiW/dTvsRu8XjADN1JSZhyzsgL/2ekgyMNdtX7z4tfNAc\nd8jBRmMsLN5cqIq9aZlIFlxuOL5ZcN05PbtxaYRVuNGfvgD7NN9p9wzYYPid\nljKiSoB8B59GcBVn0dJ6V3VxwrGsLJmPiu0upJFxVcNzP12lcXh2/95nn1/p\nPFVj\r\n=JQLw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtRlXsUb6105fISBG4sovzUwsiV+Nt7tok2SX3Go13rAiBiNHO0Ij7UIakTDgoGJzPvbR6s/SK/YVYP47R30+oxuQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.178c25b4.0_1604008236179_0.012271738024195011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-button","version":"0.20.0-canary.124beb49.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.124beb49.0","@material/mwc-ripple":"0.20.0-canary.124beb49.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=8.0.0-canary.6d9648ab2.0","@material/elevation":"=8.0.0-canary.6d9648ab2.0","@material/ripple":"=8.0.0-canary.6d9648ab2.0","@material/shape":"=8.0.0-canary.6d9648ab2.0","@material/theme":"=8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-J42F+eseBiJRoN8eEczS4eRiOSn9WIq8KkZA5i/Rzcm7NcC0nk9FOGknjuTGW6ApNm4hpZl0S8CkuYQv44wvwg==","shasum":"f68618dd88ae20dcf9557c354c014ae82ce6cde2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.124beb49.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqOCRA9TVsSAnZWagAAtLYQAIXwdlK1gT/GAaPA1nZm\n8TY0+T1O0zy2hApV0+/u/bi+oFid1LFIeO+VcbSQSmda233oRdkcvW7J+LTL\nzoSddlZUXtIKNJLih7wg3sQYXuBVHbHmn4A/fpCczdjbmDhibDegq/JadaL4\nmoToyJ0dtna9qAKSCeA2ENSgacFHdPh5Ubb9XBEG+iJkFPXMbOnRNULyYqsm\nBTnAatlYnoiF4AHbHzIItNyJ0a//rGxkAShy4ymMQza1URHBXGBHViv/Spyn\n3OiUA3tw8yR/PY2JwAL20HjL6KDicayCMCghNzhkK14ORjHB+a+eySDSYXu5\nX6AvFF0ZGMWpc3N2LV1sPzW8cJNJUSsYyTQFbFuXJi3dFt9gDghtjwd0wfVv\n22QMNbyYRPihseOnQDtdWuGS9kETjWVUIzs/Hx7m9rfY0dJ4DyABbPVnHuWt\nfcxMzQPYXSArfa6am2gWYFVRp7LcPk+zAirYqO4fO0FwlOejpHzhQm9jcU8k\nVF5Ti/PF5KlUJjdjaMNzx0qM9cXQSoISycU+2DqDxXXANed9K15Ms51bODR9\nSnc+ZHRJoq45AiRC1z1amF8hlXw6oSlXvu0wfSU26Y9eXU4Mpd9ejsLSKcvA\nHCvn8Pay4hHZ4nMQCFu7uhLAN4xcg4HNc2rF9qAdy9mrl0IH/XsYQjwiC95u\npgE4\r\n=3Rk2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCEpb+XJGQ1+xvixtJZivE+QUb15yfrxzKq+q37B25tAiEAg5GwuHtIOBpRdq4+DAAIMnUqML177h6EXaR2e3/uncY="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.124beb49.0_1604102797672_0.18424930342861034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-button","version":"0.20.0-canary.5937f468.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.5937f468.0","@material/mwc-ripple":"0.20.0-canary.5937f468.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.d6b5cd418.0","@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","@material/shape":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-er8iOdGTZa0+yTrHDlQqj1HtAsLiko+HuP0kvm/8uzRHinwMaME9xeZxKXWgWPR6utPHM9xcDqKV+lMVkv13LQ==","shasum":"bd4accc689bf1d2a55a4543bac817e07c8e85383","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.5937f468.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxenCRA9TVsSAnZWagAA/GAP/iMCqrCt4znDJ/vpSmi1\nRbU36LFQMGzBqGNqDmO9jhIRMLJA5K0jfAEFlt23KT3wj6K/Pr8nH1S8oXkH\n1zgxc/2OZMzU4UCRIOoEQCDh2Ma5GjzRIS74SkrVzlohs1HlKhqbx48ggcKZ\n+PfO/BtaxSHmfyD9OhxsaLTyDQXf0+LFLEx+OcuB+oiJI7828knIoYE918MX\nCYCHreECOcmqPJnTLd08Oipw3QEu2g5WGHgD3uK/oEBdhjmqTLQIicEfd831\nB/fk4WxnTw+Doqg2wOKtUgIfLYkfngPAIZHGR1qm7f7MLpUBgrRfgKDXiojC\nLvye05iS+/G3nzWuk1Sxm57Ndfj+FAiCPz+04KgacNB/qvK8Rs4NqDvW6eES\nElEngB0BEtMQWRnuVgkp8PyT1+KX+YloD/dWsnwUrFfYY/kmkhgAbHukPKzH\nRUImUzRblPp2fa9Ol8B5VBDkVtjhGlsxubz4PGlQaqsIxAmnaPUYpKy2YxC0\nocLePidcQ5dk1AahEKOnsLOoRTJf1BA62hTd1Qv40+2LmzKJAbtY6beYDEE0\nu7ae+3sI4mdXQUVFAYk008TJHBuHR8AQOF1hx5sy40gQY6wyPIS46anImQnl\n4evtvr9ABDXVgiSvofkkgDhFdDFU4M+nmavFylgSFVa5dlwOyVHdsnUqGPDd\nMfyI\r\n=YVzJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrb6j2CtdZdex3gRAEKjhzaixpdWf0djfBDswsd5xUkwIhAIyRrm3kOldUgblX7vgQgOZOJDfZnll+uf8p0M4w+XBQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.5937f468.0_1604523943325_0.40056809533902027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-button","version":"0.20.0-canary.a9bafaee.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.a9bafaee.0","@material/mwc-ripple":"0.20.0-canary.a9bafaee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.d6b5cd418.0","@material/elevation":"=9.0.0-canary.d6b5cd418.0","@material/ripple":"=9.0.0-canary.d6b5cd418.0","@material/shape":"=9.0.0-canary.d6b5cd418.0","@material/theme":"=9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kMJBmt+oa/U8aELyTKSSlW1Wl96y5MwypDoQyTZ3KMBHw5BR+18/JsNRF7iGYJ0OM18cEz0wyFucAnlWYZCR/g==","shasum":"04355721572b793829a249b15bf90312a3f87ccb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.a9bafaee.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0ZCRA9TVsSAnZWagAA6LoP/2tHoMGt2w54usdJh7wh\nOixC4h4xHQP+qXtY6Of3KwJXcvejCIMQG59BMwL4Nvg5xTCeSs0+eO+2orb3\ngnk8tFAPyvl77T9gQ2HbdKXrBL7IiJnxpcgAlwCcpXc3TvTK6Djza/BfnTW4\nGUA93VbVfCOawJxg9lKb0BMzlxmKoKVRBAwth9HokAWRiDc8pfFxa/pWnBLD\nSXwl0V2O/UACf1bOeHwhJfRpt4iNj+BFSfcky5abAIoj9JoX1x0pj/9g7wyJ\nYVNT7xHreKQz2nzxTRQ3vixEkoW7C97x0P7Bt8mHtY3tlWdLOiYY0/QKS4GV\nx+j0laeT132A6BO4xTPcPVL/DAPBsjRPDEG/CRSb1s9yUEb4E+F4iIpdZkEa\nfzVGDBcN9jNYCtDN06h5Svf1LD+nk47UoKxvrIYZUVSMXDupN/95DDLyoY34\ny1uBRLPcCKDLVRwoPr2axAunDHoFQJPsAQPNbW+I/+abKJtGwQs6jih4t5bI\n1Mx6RSZt6DTi3cg1WoDr4Ku19XCuB2oYZ1X0js0234T3Bt7kzotWgebqgp1n\nxl+AeS7AKT0ydX4+vydq2HSjpjbOcv7bxtCU2ABWYf+hWeopwCg3k8ITUosh\nm7jDuY4yexR5/cKQ25X4kporwaLnp+Rb8mh1JzEFdde6WpuqLfITW2QLCPRd\ngLJA\r\n=jsqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqE8BMG2eZ8c61dZvxKfhiZmDL3AZLop775ZHa1z5pmAiBhKz+RKx0lBWysBI+/L3xf9LRfN/6U/RkeNpk0tQJs4Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.a9bafaee.0_1604615448643_0.12546639165880324"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-button","version":"0.20.0-canary.184861ee.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.184861ee.0","@material/mwc-ripple":"0.20.0-canary.184861ee.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ggv9gtd+GSBIxmXwWX6OvQUfV+wuor/MbWfjnTnn0+C6bjLzqeI9Wi3vIoclJY8jGqJ+xYTGK1bevQeEqqUeTw==","shasum":"3d98c27bca4729ab96965262ee8b46fdcf2e4dac","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.184861ee.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexXCRA9TVsSAnZWagAAJQsQAJ/oeHLBMrjRwe+GeKhe\n0iwC/rH3czseRtD0kJgmsn2jwB+TMzVyDXEWIs51tOD1l4Am6XD90jGjG5+x\nf4rGaUwNjCGqmYXvkDPA7dk0gzJ5xm9UmFSJMUa8aWdwgg0DS/n4UjB6mRJw\nIcH/lvhnuK7QM5O7GiQq0pp6VntPB+ETwL46/Oofcyvgi6WbuhVzHzzD5hgp\ncEpTfN8yGYtshzDnikOjIz78l+D434xJ1q7vBSYiuIeOCU9bq/FbEHuolX4R\nD82F/lGfpW4eELoej+8QaPxwFPJEmNGsoOUIG028QaMNa6cWvb7DuksympUc\nSVWLCLHFELAy6nya/hldf0rvspbnaTTd79SkhWIhk5gHEeM54TGOlEU3D1gD\nZ+ArvYcMW8rCXich3Cp0F1ZlVc8+imAmmKJ5YVd6ynE/rW2m17aXo0cT5LCs\ncWJyTJoMH656+diOXLKatm0siQ6kTZ9VO1/r0JtP/y98n3P5QkyqmFFtKdkv\nkcCGSBpHOCWK8AfWt9ZjBYW4x7qr1uMvGAbffUevInNyxYJGG9mqcBZ29B9X\nhhCixazlCbq6JrfgS3cgSa+kYf94KxE0v+07XuaTB40tMNVV/3BNbi2khFF7\nUFquuLqRfJPtpN+juYE6oeX5BwY5p/5wIrr3r7DPb8cvpBVYiIbTLh/my8uS\neAwL\r\n=f8G2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/SH6L6yJxfJlxL9HBwSvxSTU3emiV5/gdQg68ePwZIwIgZHh/HPQdVWtJb4xiFfSKSRm495uXTZ8Q1HRYxHf330k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.184861ee.0_1604709463258_0.8797117754525396"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-button","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.6c6ae2d6.0","@material/mwc-ripple":"0.20.0-canary.6c6ae2d6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ghO4mmzlzvooI3UKsb0zCTe62UFG7BrhRNLQaE9KAfTzK23y1bSUme53F/NjIN1KUCbdo5rjNMfAvhgEICut+Q==","shasum":"86e686b7c3c0a5f9adfca4d984f99b4e53b875a6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT6wCRA9TVsSAnZWagAA6WsP/jOVOICaueAGi7c/v7PZ\n2c7xrjt9swwGW6pbhdqKpr40GpTBAQR1z1X45gpF2HVInrnwfBEr304jvLM1\nZG83jnQNxrso7Llg/UEx+CzV+dXqsXouoC/AoxtqlnU6AYg9PPGLPWMrdWmr\nQ/kNkCfTpbwdM2mC0lwLwsfCevWVvnafICo9oza17CQ8d1C1zEmHXO5BRbrT\ntjB+ARaB3Mo/6dcZ0Gs1cXUd8GdxVAerGBYnJSvSIJFG4zWuRlL6fbrZ+4c6\nCnwRg9c92UPvXtDV1n3vh6tIVF8nfBwUHArs5omcs1tfz1fTcuhSvASfLJ5h\nAUPprFK6YqaalA6+EkhV/6GW8opDyIIg3Dp//vh6pBWzzsxAKI5KaJzLLYXp\nLsY8AIl3xrk8xomJV5jO0YcErLKnBvV+AZQfPP4Jb171IRuMj2SdLUh6onLr\nXUqdfCrFBF9ye3ey5vWCKv5tfcw4TaR9ldk7u9LT+oJSQWcOg53jgOWOMd6s\nEqpIMk+ag0tc/FRovpgA87Wz4Oq29zz/lAA77eYk6CfeWLRaO6fqMRVmiwnf\nG8kzvbJlPwafuKrTRQg29Nl+mB49N0O/dRp6wsvjUfgER2MZiT/RV5L3eNQ/\nBjKRZifgcImncmFIUDIC8YhD3EJJN4OeEFRTyRD1V51qcuZOHVFA7M5lkv9Z\nMc5+\r\n=D42n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFH8jfU1y2sHVuvOFyaNZoEp7ZPZoJdx58Cdq55Q6n1ZAiBToAo9TuLBl0yHufm5gqc5g/Z2MdsMGFQk0hkKQ/3CWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.6c6ae2d6.0_1604927152260_0.6271258923072649"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-button","version":"0.20.0-canary.ea2aa477.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.ea2aa477.0","@material/mwc-ripple":"0.20.0-canary.ea2aa477.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6n0Dy7itvNbspObgRPRPrsI0ERZB0qb9cD/OBZSN6kYtWkKo7MprUeCKzn8vRbQlaU90yR08fT/I7rNQDrLdOQ==","shasum":"696b26d8a1b2dc18dbd55ba3ff48fcbc9a9ae8b6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.ea2aa477.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdeGCRA9TVsSAnZWagAA9/YP/3cMYYzDkwBQmEwbCjLu\nmLA/jJFvLFp2qJWFAhXxU0VjSkfqWacYwOKnfwHDN1/bAXcA7zKQK6qG2fQd\niR9NZibohD/GTkB5EEFS6VZjC+NC0rtwT2wkKvQNT/hHuTj8lpub5aA8Wmmi\nMcTaq0x7m5wS5paJkI6t41Uec1udkg38FQLdISBGod/r1SzDNNocMCYhSZ7m\ntlBIBYVvz0RFBNDZtcGnX4r/jAGHz0nSx0EJqjmL/INCZu6MibJ8WSeRxyKb\nlS2fpz3+VfXv0ePSckL14TNiZ6etGQxrFvHMpJkakk9BKSC4FMbWpsTc6xk2\nsPyzgYCY53iyXZukS3/0hJUrmGWuUY8cA8y/HbtHZOFII8TOgqAJQV475gBT\neF+inqlWjQv242L0WDHDwiVtiyZ5KZ3glw/CUaA6+gMHlySdnajNc62i11+9\nrjBvZJL59r5mWDsHWSWWxBqkXXCABvAzbAs99ToPUZExH9jbHK0WZPvyp25I\nL9tLHMIN+8InhITSncBSmgvTzyHaXqNfcxWTzZUpAfO6AV3mY/SA5KFIp3JA\n1CTo2Tg+XtzywAJYV76cbkw5GknDMEXezrwEpMJx5MjwoSqIYsGJMfiRKs4i\nmmYZrz4i28bR0AB7iVPjP20pKNhWqrmlILJm2PnlqC9qblTRM6vYxoYowxZp\nI949\r\n=Ak8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEZDxK3sFKeKoI1/9Nlv7AYyYY9MMvIHjMHDmhBuOtLaAiEA2df+QiEOf8nS770J6PQdord4N/wtQ1mjflqGTjwHfVg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.ea2aa477.0_1604966278243_0.749063143379479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-button","version":"0.20.0-canary.a2c088dc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.a2c088dc.0","@material/mwc-ripple":"0.20.0-canary.a2c088dc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-arWwNL/Agh89Em4i8u3NueyB8A3maCTjWWyMB8xbQOJ4JQPb5t+Lcc6CXsrzo4+NILf6QqFudhI1I8H/zl7nMw==","shasum":"26d1009e92f324be91250fde79a0c56e58ff3a72","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.a2c088dc.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKICRA9TVsSAnZWagAA1cEP/1ES6di118xyZMbe+Fmg\n6++vTD24DJU18fYveyFOKbdpJ6cBi1/DTahVOdJoK1dGfgzC2cQbdroj/CB4\n64asIYSSGs8PYrwFtcvLxKKHqalMcZrqe3jEviPavBstzJfezSz84npiP3AB\nSRiFcAzKoTgGEdrWp2dwbGX1JjM55Hvm4EYInnFFmRykr6riKdxuOVMIIZ3F\nBnHEntu2IErnnJNGVCkIMuIkz3QMEHA38JP5otE1BLur+PucjJWMQ6l5abGX\nq4m6fENT8AMUUsqz6utJ3xu9sjYpwqVAD79QOD5AV6hAQeDxF/xkcehsTNgd\nwQ9T/yBnijBNHdeqHin6aObJgzDKSwoeibEWC+CzrUNalkLtMpSxleHmhKGS\nQaPWkf62bkui8R7cp38+v3P0xdk0X51J9Yg1NmqYWiZPAl4XUWgRg9h1u/l/\nq595MzPJxgqbRhp4Cu5phl72LWrIrN93gqSIedZ+msGqHmlvuvzKKHx2gqzg\nv+WJtjwnQEj4URSDk/waJkeYUvvJJuvDAxclCZ/TaikXIKdatHDTiQNduKDL\nKgFXtHQCJkEDxkE64MYBkhxPkAZIVBUop9ZEe4L36xLdh8du3QAXBCP1X1h2\nn6ljBL2Oi3j9D+jHt+8SO+kGh6FGdqkSB4AJYl1EmBhuA6LJujV6NY/XU8yl\nPzYO\r\n=5Ngz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9e6lFtnW2I7xjeS/+qMhIUvdfo8fUZjr3dQsfUhYPkAiApZYZR9i4IWAwW93fHujz2FsTIImkEcjjirC0uHS1tcA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.a2c088dc.0_1605018247804_0.5615698629071681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-button","version":"0.20.0-canary.b04d71d4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.b04d71d4.0","@material/mwc-ripple":"0.20.0-canary.b04d71d4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^1.10.0"},"devDependencies":{"@material/button":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-R7N2LwF19s4OMMBWA+ACT8iKygoUj1xVFMegnPbdhqfjvdqvbH2lq9H3nkImnHSgYfT7QDlyKD4reqZvp7Wonw==","shasum":"7c3c550d1f47c1e84863ff7bab84b90e66c19e14","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.b04d71d4.0.tgz","fileCount":20,"unpackedSize":83262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRF7CRA9TVsSAnZWagAA6+QP/iK1tZpO7/2QYelLY83/\nvoKevCH+uCVl33N5zgEScKDzh4WjFfEMBBxXzc6/DUKW/vmla0iTW8ImSoFl\nZhIZNDfBH2tznLBE+6dU2NUksR+g2FNY7pZREd/esv6CSS8tjsphMDLYkQnu\n2vjgAJjXXaFxcjM5aJqThGMbZ5hSG/c3e7KaxKYx7JLZiYfP4Z/1dcb905dY\nzfA4Ped6/iw+1g8k2vJRjj2ggjZn1MXI7cxiqLe/FWHNTzWS2DCUE/Kx4a5p\nZ3YGsD5/oo+2Y7/RXMGSXI3iBR71CikBtZcoAuxGX6SHX8qvY3okXgJRz/8k\nxb1HL/Ie38oJNCij7nPSJ79n3eAw1FLMoI92rUJZ1h5cRtZ1rmZysZGoqeQg\nwIeYbPJhTcml1e9CmAEZFv8Za5wk/6bMbFrx/KQF6vBIpJXhdd+rALtbjTSs\n0p240GoEw9Z/1Z1s2dp6A+YP4JQBxe8rG+nLYUScvXTb78qN22h/o0fhDUjt\nhrI6+4uZ9/pndpIiYyPy3YR8Vo/HsL9eX6Tw3TkNf1cuAZVs4nuHfMBRXxCC\nS4zXF3IwurVC+0yAQBgjEmCYT2jhD9r3KCt5fJv2AQ+bIw4HukkUccvAfHoM\nYNgFZuvcAqbXIF2sCKD6zrlTf5VcluE1jIjgLbwnFtcIKTnT7sPZcygJpodL\nqk/W\r\n=qADt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGWzscW6hxciLYbUMT9NZnA/CrgN56snh0avRH/yQIGQIhAMBRICBvE6Tv0t4HjdUYI4WQtN1QURsxs8V8oAMQzCj8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.b04d71d4.0_1605177723284_0.7356972506328088"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-button","version":"0.20.0-canary.2c553352.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.2c553352.0","@material/mwc-ripple":"0.20.0-canary.2c553352.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.b39094d14.0","@material/elevation":"=9.0.0-canary.b39094d14.0","@material/ripple":"=9.0.0-canary.b39094d14.0","@material/shape":"=9.0.0-canary.b39094d14.0","@material/theme":"=9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BNxsUS2HYvb4hEFDboPrzFG3QF29/o5Hw+8Cb6n57ly4uLQ4miR0BDv8Ftp2iLgtsjweITJAgTUjvEa59lnqnQ==","shasum":"4307fba202376b56c95ad6aa4ba342dc9cdbefc4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.2c553352.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbpmCRA9TVsSAnZWagAAgc0P/1GkKQR4G8ml5oxLkY/U\n+Cq+sEHURo9LrKWMgICB/Ulsj4zXt8+Iuoy4vbxEkDOvqtIbHS6IUNaJrhUY\nTKp/wozlYBeIPYHy7Jt5icE7QiTRSxolxV3mA8j9hMZj5JCnBIyOzUHjYZJM\nAdW3goqAMFhVbFEWkorNvTIoiD3xnFiToVhV1hhwil7O+SlC4E//hHpSvN9v\ncDbnW4sOXloNKrZToU/kVeh6JifaKunGr73z8Zw4ZhrQD95kJp4XEaR/cBmx\n3TO8p+EqFe85+u+MUeNT1EBhOaO6ZVu4ewkd8gZWK3je+Co3Gk9mK3rXdhGo\nteJ9wuM017yKOlLeVyXxHIeXyPMRj+7OR69LQm2P2ZDb6L8zBWt+b9cBrhb+\nb3b3qoe9+s42lcYo5Lbx1/7IRXpXl8NnMm3CqcEs3F9/tllNEgyRPIr5PMDE\nBlmIe4tBBpmxGYNVf0MNOxg879cVdM/ppK/TvDrkPS9vLv9XPYSs1v+1dNkh\ntIfUXpOidy9k5tWFZ6XsEI8w5tJTatld58uqN/nnoI2pGmxKNBkh82rRd7SI\nUKzU+LVFBv2i925z4/ioTgsOQkF8r6nIhgtkSoef0DRm+b55Rl1yJSvWBtGu\nrGZVm5vlCzjXdft9m4BOjpSCoLiMaJrdswHuSbMVU7TsxyibcjGQr3wFmu4I\ny5+g\r\n=tSIE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKEqE0IH0WR6X5iZMtASexh1p9/25cfoEm9LDJsd2sagIgf6IPP2y3A34IYU/xuYcU87b5zl5r31ZhXeDsC3N9aXs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.2c553352.0_1605220966123_0.35646264615507617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-button","version":"0.20.0-canary.6560d19a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.6560d19a.0","@material/mwc-ripple":"0.20.0-canary.6560d19a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qCZUhsHAp0KNy9L4MWnySeoKXcNu5J5zKhAPJoR82mbqRgvhaD+CC9uYqaoIqO4Pa7suhapi68EY7Jh8yj4C4Q==","shasum":"b74e3bdf936108b0db4bf7ce2225e52966e33c6c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.6560d19a.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEbCRA9TVsSAnZWagAA27EP/Aw2aBfWxznY7KL+UC8Z\ngFrNM05EdAUaaH5HjaxAV4VLLKxITd7jbXprZVK06s2qtEXbCFu08FP6LiPp\nPqPy8JAj0hqFvOkMD1OYF4XWu4Uhf89lc7M3rD+8KSsH2P1tXQjbGQ1H7ENG\n9Td+tw62ZSCfesO7SbJFDQxxmFr0NdmWZzlm2ENmyk4j3avC6E5DjJIyOssB\nPMZp7q0WuWVY9tNK4+cU3trsS39xunEyal+C7QtMIEv1jCYAVe6ABXH+tGId\n0NQ0BLbWiD7gMffrF/01NGMgOCXZePA+TsSRn6XxuAbULtD+V1BmWk+8eNvp\nIMuLATRfm9kVAbjy1EYtUbVEH0E8p50zMVDy3N/RTCPSN+NB9IlFSgMJaxqN\nvqewDCYRmVFDQ+FQ7w7K/gb3cqny7RS0T5oAr+k4M4XrAFvYp6RewhwYoMZe\nwARs3JhJ8YxpCTF639dsZ+bOdz2nNQH6Bl95Bz8Ievxo3v5OcXG9LFUnWJEv\nUwkMIjzPZTcORIGhbdFCtqd5f/m8WUFcFhodkPEN4EqAF1j4KKSA0Z4uBjcm\n57IDzzofJPLJkSOon7uwopqjX4zMrcuxKQfE0tu1ds5X0L8HRbLtiDcvxvI8\n7vGOCtWYWUJHpUa+7R8ZC3lBN1l+f5Q+hEnz0nGb27wVQGYICMnpwEbJ42r0\nDSnu\r\n=fTBF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqgoU4cvbS6HT3HRhD8gyW+/7wtbRzimH/NjQA+HE97wIgaYBJQxNtSu+5+DlwC+eI8hboNA72xAJBNibvNo1cZS8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.6560d19a.0_1605300507334_0.9481826489057912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-button","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.a28d5ec3.0","@material/mwc-ripple":"0.20.0-canary.a28d5ec3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BZCoHFRP1cN9+iWraKTGpKElU/E6bd9YNptSUkyuHI6F/V2NFSa+6nAmLnb2skcolmasC8QGMWNjNeCaicOUGA==","shasum":"dce1046b44b71f56b567971cc8bee28b7f5044b6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.a28d5ec3.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+sUCRA9TVsSAnZWagAAzwYQAJuST12Q1g0gBByRPaMV\nppTSvm7SBTD5SYWUGvtb/cRq4d6wauZm6jf9DUniejvsyN6GQ/+WVwgh5Zuo\nFXoVmoQ1B15uZw8mMF5TgqbFBkFHSKQbl8Hl7nAktM7SL4J/+jKjX0QOdFZC\nxuBI2QNiAfIX87nw+lYVlwCgRwEdU/kop6bpvxPBR285pWoyspAilAnZVtBC\nQrGJBVoP15KoIp+0Q++g5AQVUrs2Uk8RyiIXduVa2WvpPmpK13ewC1OSelLa\nCRRmOirVkKCPz381D2shZy62WB6/m2nn/LIIjkUfxvJ2z2+sLXef548R0emF\nAxuATy1SupkiAvizVri5EFZricjMfdga+jHuHb3tvwxpC9qE0VpS9NCyiN/q\nt0TvL/H/h4/4SlyYJ6d5oEUNFSRoLPiAyGRvQB4cgeilxMnLZHJnd4ffOV29\nCmYw1SYfs44fHb5zK9/d/J9CXMm+RlVL+3LmWtLTtohyTctdzgECoQC/TV0k\nHZIg4Z8lBHdwsXXWDJTbIgg5oFu5rhvQz3Ej78CqG9htsvwAhWfayw9JZKi4\n3JDGYnbayYbe+Erv8NFCQUGRCCQZXpiFoKWqVDS7aXtp0J9ZEBMmbDMmf3+l\nowRopTalV33/CPoOgvggr3QUyRJrkpDy38wlifLGR3i0NHk7znbXF/5KPmJ1\nwIcd\r\n=mZGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICHyoXAWA1U9I/rcD5mXivHHh9l/kKu6eAq4EnxIb4qfAiAz96IscgQAUr8gdbV/kVa1s8bNNpHaV+NsHkLAvoedYQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.a28d5ec3.0_1605626638438_0.1278217935868189"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-button","version":"0.20.0-canary.03e7e778.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.03e7e778.0","@material/mwc-ripple":"0.20.0-canary.03e7e778.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.240c5f74f.0","@material/elevation":"=9.0.0-canary.240c5f74f.0","@material/ripple":"=9.0.0-canary.240c5f74f.0","@material/shape":"=9.0.0-canary.240c5f74f.0","@material/theme":"=9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nHvark7/u6SF3GRDoi9UH/OFure0laiFDfHWXbbv/sIg8UmUHpXe/bthYTINzPS97NOiZmSq+0BxvIB5Vkslcg==","shasum":"b8c68542a5327ceefe3a45bb70c49ddd62ccbb11","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.03e7e778.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPICRA9TVsSAnZWagAAkgkP/jZWgYRjqpU0XsB3KNWY\nwKgaE7jrS5M5iYIPo/mCjzIeC7PXCQ2Lj9zuJgFzgUVNJZsP0bKE/ls9HhRc\nuZ2LB2tC353/AAcb+J0HPmre2O6y3ErEu12OID3OFWNDVXFl1lR8pHMQA5ky\nGaPOufYRBQyn6wfzifT6cp9QWFjMiOe2yUlP1h2QaQ1+/k03D6k5An8ue/Ny\nlfyc1fNhtTpAqj17rJYI4gX/OSwRL3oCoc6z+kIB5h/uD6R9y5CFseeGmfIv\nTt2homA42VcFMOdFSNW6JQhCpzegMbXeSTvIBFoShbvr5mNeOBln9QDLr2df\n5lGr78EP/jblsWzsvdBYn5d1eYHxIuD09fFT0AettW/jCaHMrLfWZ1LHfa9b\nPBLRXT/ALNg+oIeDutgqlDZPcHjVW8jMwLnnuOd4a2gfZ743iEp3pJCHuvDk\ndpisBwFBJPRQuno8wUrziiXku3SB7V5ezCns9CZ9k1vwCF/d08KrbkuRY56T\n+3ACI4IGqj9/BRJ3t8iKgMMTnjLw9QiSSpCzWj6hCRFkJc7LFI+Bd0AcKtGU\ni3DvtNo0uAvchNTc2fFQMgfmF4zr9kZLTNCScYK1FPPziYf4m49BD1DbHZfh\n0/tKh13OJB2Hl4G+1t9/rahaIidUrMbcMF7ZQwsTwkgoEi+xQhssEpGGm2yD\nK7BO\r\n=mtXz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm0HQovUJrP2hEiM16PE7gE7WvC7B17nSge34SmZBhNQIgZ9IcP7Y2wcrkwiq66Y/jSPwvNxjFU1pR6wCW/91uWZ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.03e7e778.0_1605641158951_0.7252444808086893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-button","version":"0.20.0-canary.ac8ed597.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.ac8ed597.0","@material/mwc-ripple":"0.20.0-canary.ac8ed597.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-NN6pwxRPoZqJOt9kY9SV6rJjeoKxMUtZPiHtmesVgqP7v3sZpX3fwnG3L4A/NZEqk9HtmYgnAxVQkO3cgPL9Pg==","shasum":"d40ad39079dc81392a76734a8ea6e2a25b074ddc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.ac8ed597.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEqjCRA9TVsSAnZWagAAN6YQAJEK0pOmE4YHE3NJhdym\nBD0G/y/juwdbyDXmiJcKqdbZtHfOKFtSPDPa/QGxGI+f6aXNUXQIedeypIyh\n1WvNwholn3REz6vRTjeyL3NYONVMBet7YIPnHpD0qY4yv4JObnckRjwqfi+s\nOvaSW+K/aPomIk78NqlAOF8WiEZNOM+8qw0HsVcC46yx134D11s6vMo4jjOV\nSlm9258+Qrwj1pvJ3ThA+9x2zeCppu90wkEifxb5AEivv3Xp0GfxJ2mPSLzW\nGMRcsYz37HOGjnKp1cA4U3Q1tRzAlduD4EE0GHQvGc3Jq+QtHwzvQjyye02r\nbnMQ+LnFyn1T3LMi6COkPLEUSBCLVpTR/aeU+TE0gRHQBKsROfUyl4his2gT\ncUL18CsCIZDYB7Q6qciLKwRm6q9U5qT61Osm3hOak0n7GOKYfrfH8lrmor+F\nnGMJG93FaZd2/Z6Yhn42xVavaX4QhngiNpPVNEEVOg/OSshg9dJAumLAeoit\nQeoJhWXWmlVmCHpuXyL4tph2artLs0NNmIBuny/OK9pJkFwhEL2lyrDDQxzn\njBQuonXJr7zHtEkWSeNvORZuLM2MHe4AyyLiuGOB1ZNNLPVidROmA5emg3ev\nE6B+IA4BRsLwc98M4UO56KzZdbJ0XxRMwtlDtG+3yaJs0ezYnVaF8ZlDolcq\nMUfR\r\n=hKtv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq+L221NbwmkcleLbFLOIsMsjdaOzQtvn3RbLdKgCTJwIgB1OYiFg7Vy52AaGlj9voD7vHsxSQiMdFZbIo1dX7kTE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.ac8ed597.0_1605651106630_0.30966318153624495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-button","version":"0.20.0-canary.b6a60f60.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.b6a60f60.0","@material/mwc-ripple":"0.20.0-canary.b6a60f60.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-W93G/lIWO1WwAowKJ5M386hVevA71HAnArg2v1o7qXvKLt/8B24v5ns+8O5i7/oD/tAc2Ascoui3shJ8h8FnEw==","shasum":"a32a8bdc8f4e6bd81fcf0c5aa50085ef283db014","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.b6a60f60.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQaCRA9TVsSAnZWagAA8kEQAIrLdI54YvFLTG2xvPcq\n9EwwO6+tpveg1MY9DMZDspQxmOQVaIj6bPDkHMzSefPezwQ6IfBMcw60zsDV\nWlDdqfUK7OkpTO0MbTj1zqmAtxkA/s0awKfT2Q8KrBU3t5A4nx9eV05Ygu61\nmE6RyLGsPrmnPqHPagiZvn3cI/014hpWYMguOyvW4bjPfU6SEZxlrEwiFCye\nFi88Vo7DhlBsp5lWqcl8CC06ZcfHqisg+KQdGXg1Uyr1BJXdeujHLM7YCubj\nO3R/blsWBW8YjUFWhpROXkxxCyTQNonoa1OcgBj6lO0352wanwhj61lLTrfP\nIi5MfSqXvOTSeNOslAcIy8sQUkuIvFHP1b7TJ+Zy+iO4PF407DLD4UQ9Gywr\nTlWyQIcRU46DeNC/SW/5s6LsqZSMZx29wXQwZc81WM6ncRObUM4gpwBUi1Fa\n6x/Wgvbg0f7HDohOusXczBp+1OtfQFgLTwhYrJJl8w0b0AzNe7nuOeOsdvop\nubenP/2XXssNUh8um2l/Fdq2i/z2DNR6ME7j0YW9zdaQJl4vOIrU9q3orLbB\n1Jj4zPEvME/PirpbSeLqbrGKb7cdPT6HOaWrG8EidLF69jD5svkv9VXMxOOm\nVd98inOU6MeUj7p0xeTH9cxKbL0+7dqJN2H6sR2KfGVK1+HTG3xnv4AvTpDg\nsQB9\r\n=Afm+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAW6ALlbnP/fiJ+yrwHU6G3MpeS4iHegWreN4duQCVFMAiAhAVzvxid6DG6G3PEDSBio9PNjjdDRzl7WiErO1tcvxQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.b6a60f60.0_1605653530316_0.3676736560874312"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-button","version":"0.20.0-canary.71cc24fb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.71cc24fb.0","@material/mwc-ripple":"0.20.0-canary.71cc24fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yATlOCBf+BuwhPbkfH/CFcnBbe6rXJQhL0HKDolYmdZe4kASobzTuYQnZ8AGcc/QF+NdjwkRubTPOdPUVnWwpQ==","shasum":"e03dc91a549beeb825ad679e440bc643ea86ebca","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.71cc24fb.0.tgz","fileCount":20,"unpackedSize":83261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnaCRA9TVsSAnZWagAAk7gP/2tendqFvDIOZ3yBYYQU\nkpxOFu6K8qSZBm+rXSfL+TN+4D4XYlFJhb2CRyxdPYdVWq8tOOQiRdEFz4PW\n+AzqNJYVeEHcX1UuHv0gqAZiP0nIXznX9rlVfrq9Lz2fZkDdqHfo8SNFsCAh\nT+FI8RhXANQdLatLcSg9lheWHqcP/7vEKgkEjsEdZOOP6dBD7tdr5IPyQTiJ\nUc5e27Mu9///BqDNrnjQspV7UwgWvXmxOmQ60hKtq1ZhO9gIwGqCdDh94VUQ\ncgNvnQnLsS73An4dN+bWh8UPvvIKPfzYcobKo6x9chTUlXWmN2RovmRkTA+1\nmFhzAdeJDS3pQKvYLYBrEwBxH7pcywMjUQvpE+9FtKgqDqa5KgOmbg08YX87\ns+jcgYWnvv1KtW5L4KyOkNTvE7AlFiXvqUOz89x9HwlOiiQQxYFW3+0M4EDY\n42cCAqEkPj6Y8K30VQN1n6sNACGaY5OvjBxuCZLK2YG0g8ac/1th7Kpk3FJx\n7G7LlH411KOlXlffD40SuG31rwBmiq7LyV144l1u3W+VrR6hEWvFp+It0Xi8\nVX9wZCibHMm9lQIo+vyxMjrF72XreFK9wT4zhWDLd1Pe6Vhux7Q8wbkJD2gD\nAO7M+eOXlFqoKDjrbyFgI4fHtQy6PjI9HkkTQASxcKitpwh7To1xso9iM8aT\nIJaR\r\n=/8h2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtbkKVFPEmnrp/6fyjSo6ky9sdPEbBqPKzFz+37YBhIgIhAMWbteHT9/0eMFowdrb4PcwNcgVg/djLIcdOpfJWDAJf"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.71cc24fb.0_1605655001810_0.6268752954140275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-button","version":"0.20.0-canary.761027ff.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.761027ff.0","@material/mwc-ripple":"0.20.0-canary.761027ff.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.482ff9091.0","@material/elevation":"=9.0.0-canary.482ff9091.0","@material/ripple":"=9.0.0-canary.482ff9091.0","@material/shape":"=9.0.0-canary.482ff9091.0","@material/theme":"=9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DCXw26ANpp+lFf6D/coHpvbe1GAGXKlC0HobKhuFdLgLvjNH2GS75gg0nUaEJoAuxzOq+3tCwY2Wgiu3Fo9ZnQ==","shasum":"bb286bcf8288e361c6050d0f10988783df019a95","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.761027ff.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZyuCRA9TVsSAnZWagAAEV4P/RtGwe7DgPpfEbL9165D\nZeobTg90wiDmOwgnMp25L2mmrjxUSEtushNv3hoVU83OLWEvnCz8utLtyZU7\n4Z2iioKQywaIb7yScIhs2TMrnG9C4HQNdUIbHzRhvBO2KgdZG9Z1SfSOCPCX\nX83mMQbKovzc2lZBf4jW1TUY+dssdt5hGfyaj8n8sOsBysw7YnS3FnnXTLYv\n6gb7rRJ0WdzuIMY72VqGjH64TG1EFwadHDXh+XpCHu7TOesnqvYDTjIfQtta\nvU3F6W7PXLEU4oSuEtzm+OnWJm5LDsgEqbfcVLb6YMKkZYWUAkXDI02E4sg7\n5yt3pcfnEJLOk7cPlJoe94T4bNX2Ps+dRXY0bC+mzaDuFWb3Vm8WJoQi7+Zr\nO6pgJVSQbmW2ohzsU3iIjB7ian5atO+SWlUNq/KCCkLUW+w6mTTlgzJCJVnz\nkMXpF2r648Zrxk0mdw2THCiddjVHOz5578Mb+q+p2PDBEpwcZWSv06JCxCxb\n0MWG37R1EGZvkbVOTsnP1psyikvnSQuBnosRjq2wZEglJyRFq74pFTi3Sj6w\nZ1E/oYwdjbUBYz9Ig16/NbagYC8ppWx0mdhlRlNUd0w96WRyT9Gh+bwYksIZ\njoTuFD20meU6xfexpFiwvBA+enenBeYRY9VAWcAw47vnepOfguI/0FyOeFfh\n0f4R\r\n=9mJw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbLjSmvbMsCNyiuvcu8X/CsBzqXbqLFDVY+WtzAPuqZAIgVOvijEH4J9hd9bYt2RASM7+q+6FEuM08y/9adAz27/A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.761027ff.0_1605737646489_0.7527959905377786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-button","version":"0.20.0-canary.dc93d04c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.dc93d04c.0","@material/mwc-ripple":"0.20.0-canary.dc93d04c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.99cfb6bd5.0","@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","@material/shape":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9+x0wbNaE6IkYDCBijXesT5hYCKkiap+L9rO2+SE9pfS+5Oidlx/Zq/MuiWXS1qDt7HfVY8y7NzkWb70fowhDw==","shasum":"ea902acb9dd62a26e7867aa04b6288f543110d8a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.dc93d04c.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4KCRA9TVsSAnZWagAAvckP/2k91bGf8wAxIySfcN/y\nPe9NyF1aM+y3wu7hXPokFw+wASq6z6Z2mpN820kX/Qq4q8bXdgUdCipGJg96\neqUC2lJZgNGrChvrJCEuGZOLS9J1R74vWU3LxmgwANunQw5yI94BcM6mCAUn\nxinIeAQMxAynGojP4ze241TNd3UQMl1exlnnFnpNqv8lHAYMao7svWKjFaBr\nrvwBGT5ab/o1kbMfl47N6ohqewkuQGvmtol/c7Tbw5FEIm/r+r2RGoEC9IZO\nGPjDzwD3sAJuiYhHhzKiCqv6YbN5SfhCMl5blLwHx+63sfZuG+ciyv1sH8ZJ\nymv+OizB9+dFaEHmSzJSIzdxB5pHWCG4B5hDp1ArISheveRlE4vruT/54mxx\nDLr8Tp5MnULgZ1QAbVH7F7T1Ammq08/AY6Q0u9z2wXzaDNZXaa+ygLY2wEqQ\nJbO1jCpnqowYAk/6RxU469xVZ/Utn2VJ2UQUI57AKcn67fpF/yE0oyP5BHlV\n1CgQUIYyFdgGpyqMNH/90iKDbvC1wQwUkA7QP8MEfVfv2yLRSI+7wcvx5Kv+\n1lawWVIqia8LrXK4s1x+bRleJYjyikRMOgqJSzK31psN+6T+KOC+LQwH4het\n1k0XYuWt/9ov36taPnMWcfh+ogkv4x+/JfxqW3MaAWE75sChyJrPufiTJ5lK\nyAmt\r\n=15OL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZe/cJvrdZKpUE2WXRL3hl2DfAv8+4jfF59+QOWNgY6AIhANf5k7U9Rfyn1c/ioPNYmW9MQoBEtVGT2hfL3hSMPFEt"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.dc93d04c.0_1605737993822_0.9843700074084083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-button","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.4a5d4eeb.0","@material/mwc-ripple":"0.20.0-canary.4a5d4eeb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.99cfb6bd5.0","@material/elevation":"=9.0.0-canary.99cfb6bd5.0","@material/ripple":"=9.0.0-canary.99cfb6bd5.0","@material/shape":"=9.0.0-canary.99cfb6bd5.0","@material/theme":"=9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+3MQSA4qLXVFjMf/DTOOQhSuxMnYhIu0Sv6+orrTW5P84Cf/TmAPowANjED2u22lnFU5gDmqs2vTDtGJf7HN4Q==","shasum":"0bd458661bd32765f5f2492d19014662239da1ec","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldcCRA9TVsSAnZWagAAygwP/3Kz+MBUsgNYIakAHDfN\neZutGeTveqO96V3PQgfzsZbGXf+fBj8hpRYS7jamoReZRla1p2ISu+pgTlwg\nzdmgiOxEMf5xhNEX2s8BkyxCDlrNyFeRgbDFU3pjf4DrXalgBGZN1eCVWB6J\n2me2gRXzVyTTJGsWnrkDxIcMPjq3KDY+BCiS7632JM4DLChtI9T3QjOt7kU1\nafITku+MGBUeR2iWw4zIg+ewSErUH3A/Nd3PJUyFgYbG/vkEGZwhai/jXGm7\n36vToEoPeK5LI07EetWKxQFLtsEEOxlneTOyyj0fAxrmLRxuK/mqzNbUGBMQ\nJAGlS6ZQzeu0+byv026djO9REKHtprEr7qrWwJUOUkQgIX0/8xtIngtBL9/i\ne8Rd8eZCo3NheFcX7I+P34fAzQMCNSIoLyCfvm1WmT+falC8pG7u7F6OAyex\na/XEvu/+776GvgepG1wgrMfBhyzZCtrYHDQmneuGe8uyvSiPtiuge7uIZMiS\nN9ne5nWsj5NcjwBXYvnpYCWzUEVApXFvt8pW6n6gzQ9TTBOX9DwBlTMA6xVw\nnwQUQoPWxSOqFPoaENMuETwAEaaidNz9qpbzpBXfDm22iBX3/0XgcPOVEdT3\nddw6CH5kCYUvQ78lxpU9jVB1TiDeiuQnHVZYkDfTgOPX6twiEDxC171BHL1w\nGUyw\r\n=Jr+1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHl65QUuVWdOfEVXywnnd+3sYFLKUUPqR2O64QvkQcsOAiEAllnzm02KyjyuZAPlk4WnytaMMSbSI6UP8TI0xRYQu0c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.4a5d4eeb.0_1605785435965_0.7364954545275264"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-button","version":"0.20.0-canary.bd176a15.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.bd176a15.0","@material/mwc-ripple":"0.20.0-canary.bd176a15.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.30c11bfc2.0","@material/elevation":"=9.0.0-canary.30c11bfc2.0","@material/ripple":"=9.0.0-canary.30c11bfc2.0","@material/shape":"=9.0.0-canary.30c11bfc2.0","@material/theme":"=9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1pLqLMvav0Cp93cSV4gihLUyD/q8KnkhEq/ACwtITYm9vAhEkQwbUeMalkP4eI/K6VV9tQOi72L/Ux0kbL+ujA==","shasum":"861de234ca519ef0036dc9658f7d05bd99f4e48f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.bd176a15.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsMbCRA9TVsSAnZWagAAS7QP/0zzQs9kvJ5dDyhp+miq\nV2qoggcBdUsxkb0McexsxQYCCuBUryyIuzcSEivB4npT6iutjkYZ8s79wpMR\nBOHwdLkbsuEbQUve7L7lTB4t2C34NmXW7VWNEcWgj+CSdIQ3He0QVAjHpyh4\nqz+DYSVlLz6zbhTNZjNio9kaEeeBhb6Cbh52q3hR38fH3E/hRIwFDx++aoIJ\nyffPy3vtwkzcUZ09jsFY8C4I4b0uC2VNQDlNbPE1PXrrzzKLVDQB4xpu4MAK\nY3Ksq3rh5Ab+N34MBe94+efpks3WjN+KdDAeQYg9Q9AKmCQHXnMzYCQPyrgB\nSUWckSGpCh5PMBE2V/ZoaqxWwl94CQSN92m0FB+xlzJWglxwnKeoPj7dkEpW\nbxDSRKtJVYbIJhXBcT4m49zfwZkJNahR7fqV/sd9E98PR0IZRcx1ePaCwndJ\ndeHvGBzrhac6yGVVH2X90Nm0ZeImdMXl/1BQRwgbqu2WsSCB/KyNrj0WMiFD\nBdiQF4CWDYtzwmQSkDrDaOQEgPx2JZjARedSi6yju1c1aaaOMYx2ZOxz65v6\neNCqTZQQqqsQlWm1zfqzhU1w9UCmBHFIRL7iCUeLyT9s2mU3GDcRCsjN3lX+\nerqUsrC0IYawMQou5cZc6/cU8+UnNqFKoCEBby/8i3/OGu2q5aUK5gkFnfDK\nNmX9\r\n=t5pK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzkZUBN0pUmx3gSHOSYsBLveI+UurcvQMP+kKtTbSBzAIhAO/E2dOuu6sGgVGbY713yfA8VRp7OxrWaj2j3GZJoHqy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.bd176a15.0_1605813018611_0.9991852249937363"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-button","version":"0.20.0-canary.e85aa60d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.e85aa60d.0","@material/mwc-ripple":"0.20.0-canary.e85aa60d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.c927a5d05.0","@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","@material/shape":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8SGXHrACCJfA6ohzrePys5LFp+XdksPudMcOVVNuxpjdypWDLpxlcy37yOU4PgXU8cSIQs9/rDqjSb3SjRVHfA==","shasum":"775e74d65a26c9102fba11bbf8ad61473c6be00d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.e85aa60d.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDanCRA9TVsSAnZWagAAXpAP/Aj03Q3BaeJ0t3NBDUHk\nfsl3yTJUnl3R/2R7dqcgbKXrJf2ZgN5SrLaqUX+BQfX2naSSFNmI4TtqwWmB\nvcX6nxEzvNpqiZj6xAk4w5/q1kuBpje3PaBGKc1fdhaQ7OQLY9dNNr7NN43f\ndk2ixLKMtxJU2j9oiAJ38MWF1Z5Jc49Bo517169CTSBijkeo1uDXVpQ3rPLE\nyBrc2HbN79Iby6a+kpCLcco2tpQMOHAir+XTjpQwnePD9XyaU/rvWMlaoyV7\nSjq+ndqRWBlieKUBDNULSNUIg+RA4scbwPGRu8CHCP52kKTPG1Wt9hCSs+M4\nqLxNjvVFQDZ4tP+l5Hq8CyA2koIKaecj7PxOvw7aZYujNfoovm9JirtWwMhV\n+a35DX06easUJlovBHkhEYjAna4sMq4Gf/o/hcKlJw1NdDrG3R0Fyxf2hxCj\nNa3dU88R54i2Zr0Ghrx3HEI7FPRHNMwwqsFfrwAdtdvX3/mIVFVunTDD5G4q\nx5/u39IXQwvKJW0A89qnMqXJsthJR9YlcuxEzv/84bgPR3JtCSxcUlulDmIo\nj3DduBmsenWJ15O8YnVF+Eqo2Mi1UXMXyPkMZvFoH7Q45+v09AqS6kCUFfcM\noiyxem3QAwLyoIdl22ED4MwAe3QvqF4e2Ej+LE8OipQ24fBcYTOfoBiqZieM\nkmrp\r\n=F9J/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCSHVWFzELK0OACL649Ioh5GPwv71IrNAwpp85E5DAjgIhAJpr7leXhno7c1KB59pqzck2VoXMJaA5HkIpsC+ka4WO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.e85aa60d.0_1606170278920_0.2223987584255258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-button","version":"0.20.0-canary.72092360.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.72092360.0","@material/mwc-ripple":"0.20.0-canary.72092360.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.c927a5d05.0","@material/elevation":"=9.0.0-canary.c927a5d05.0","@material/ripple":"=9.0.0-canary.c927a5d05.0","@material/shape":"=9.0.0-canary.c927a5d05.0","@material/theme":"=9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IK3d1N8fOPTLwD7asTz/4Lh/s1thQ4BaRex8SbtDYLunaxHtfslAvaMy/HALQBVZrCPMh6gZCoPBU8mK++1prw==","shasum":"5ef2851024cb6cbcec9047d533ca7ea7ec837997","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.72092360.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImDCRA9TVsSAnZWagAAcEAP/jDr7/XeQQFjgEuZNVZK\ny5M0unxeAhb1/kXCVLJritKvmJTzotZ0CPqqFoGFz6lUWA5XiXu+G7PzVRw7\nkeYrP/C8j6nAfAnQBUNjFL7yDD7/AXjbp1o8wc1/QiteioREgsF1eu14k3x4\nGxzfhLlEU6KeFT8+bMG+qCjjNpOTQWJg8b5C8b5Wvyn2qdRULlh1V2sy4o7X\nEvuBnt88PAgh0nlVlpVXmYu0Rc+T+25Tuq/UueIy9NgIlwRGtEbncILKsH3y\nVZcLDL+JxV+Z0gLbph0+0wQ4tm8tc3C9SijVfe32AzPA4XrBWaOFwJyOjrTO\nl/6HPmZCsWaZFdNT3olAXnWZxAko1y07p5DvtmaCELO2b0kjHrgRvYX3DFdH\n5xQmuuIPds1aPsXnvHa1HcJ9UQvyRCfPczZTqxiFEYqtVswUB+h0//Dr72SF\nSNwlIQATKR2ZtZLgU0n9Jxg9/HUEC99viqarpuPeCo4EZj0zMnLiwiegxCQr\nLWdXk2DGuLiqZU7e0bszX6MMUg3OY6CT175nVucb5IPX7wwrsq17aPymGjLv\nPc/26uWHvFlBxmoRNK53m4pYaCmk0c/MOvaSuoiZjKVA3dy6MaKNoj8jBBr5\n+dSbYGrIrtZLkDHEXMDjdNd8ZjQjHXYQbBSnpVStaYjJ33E1glqLHYKpvbBS\nFomM\r\n=xzlb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDcMG3IlAx8aRTfGUT1rXaF96w7fclXmWUZ6oupUOzMQIhALd0Or88EzTwxfHhEWClBCW1K7uxdajy0FsybhRj6ITQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.72092360.0_1606191491390_0.1373222578932516"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-button","version":"0.20.0-canary.baf9d39f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.baf9d39f.0","@material/mwc-ripple":"0.20.0-canary.baf9d39f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AaOBA7hv3sSqlr3G6jjnJ6ZN2obQjcBEPiS/MiTzDqMZwg1nR1A6DDZWADeLW0UQIVGgoQBemab4udMbLXWwkQ==","shasum":"99130af203e159c2be3505a2a4b5f3f06bf7b828","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.baf9d39f.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtEjCRA9TVsSAnZWagAAY5MP/3wAFx+4JlqcLXESTi02\nX7IZxQsT67Q3pFP3vPAyuhdUcnIR1TglZjKbkbjmPNHo+ojB73oivSKXw1JS\nlGRWnNenpuKbC6Fs4kVbp4x1q7JsSygX71YRKymUXISQPnaNv2Ps2P8xfygI\nu0w7QS3JPI8KP7y3LBbQnPbHyjYtbm39WX3qaYjOoBAzSFP99wauHxeS7kdQ\n2V68LJyTI7Yym6ki/XRC8qIwv25d1MdUIGQIxHcQCvD1BywqJB0d3bHPWyKm\nfk5Dr25Jcx2h9tfj+gruqCtxrjjUaEf+VCfelB90xlHF3b3hciU49P0uOidT\nJg+latKFt5ApabJYajbdHPv67gM6b+rGmKlxsDGNXLWh9YjMWkSND0l9mn2P\nDkgPFDy5v5F7PEHP5xkPbjgjKCrJmSBztcLWIANAdSZmqQAHqbK/fSM+tvaF\ng+LsgZBsr8RNIL5iQo+jtvveQnvlR2ph21PfDiYzEqLBLRxW0BF1SLF19ZP8\nLG/K0t0lJW1zmirJlvJlHprgJAQ+pe0ldssnERbVcDCz8PT8FgZX7vwRkCy2\nL87IiDICAC4nJ1V/3M79vvqxJ3tTdsonLEFD9tLoZ/xl/eygP1heFV/TgpFT\nSPCfB1GoHE0kwBQUlgSdOXkW+DbpxMJaTKhkLsb4MYSEci3XG2lZNCr+DL4C\nzLXQ\r\n=Asdb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDS+k785leCeWFP8v8CE2N/c5vCY7PTFZLivwFwJWnDeAiAausi6BDQVd0BvHUB37wvZJBsrQYulScESmWujnXIDHg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.baf9d39f.0_1606340899471_0.7145940315373358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-button","version":"0.20.0-canary.51aab0ad.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.51aab0ad.0","@material/mwc-ripple":"0.20.0-canary.51aab0ad.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZBvsu+SmwgzSu2JCk5aH7BszXR98RSRTDZai0OPgMmLiwtvayk/nA8Fgm7fm+C9QFkeXV2krsbKLzAGS1bYyrg==","shasum":"7fc45d00bb28ec1dabf7047da2807a6b8d875584","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.51aab0ad.0.tgz","fileCount":20,"unpackedSize":83387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbNCRA9TVsSAnZWagAA18gP/j4FvR4oapTV5QahS4vM\nOVp+OPj7sCkRypkW75jutDEMpAjwgEi4SWgR9Yah0E/RCFTMTQhYNaCoUwe5\nsj+Qa1DEqKNMLifhxKKZNE5hZFctadM4Az1BdLTmsEwKkVMCkXMfn3r27RYF\nfWNyAWbnTc0ziNaax72hsrvcW1BBUvliCAqbyb6gRRENKmxX17vM8Yx1v7lh\nKYTPV8L1+HVsOfOVoim020/YzYy54dSV/bYi6iuz7YPMNUCFudLK+ZxmjF+m\n3bhi+M7j+bELIj5+swVIzC3Lz9difi7907oyyEkSn+gpdsvhkDaxn3Qt8MWB\nIrbRfGR1xeoC70tERKafqv1y20/U+TuFDBjm/rxvaUWjNahSJbew75x/Ex/d\nwl5TzWZWWeQKR51i9NyxSeoekaak4ppmxf5hViKWBTqEgNuLAX8aJp8N1tWG\nZE7x/T/23C6e5OMeGIZmvh3DT/NWcxzSr1KyTtT7+cYp4oW8wn7/zJEoMLpA\nkUewfcgXE/uiRr3AkcnhO15hfGmkypSAC1M9/Rx/43vOVBg95G75B6qTh2Yk\nqN4uzdqbHSHiLOXlo/8ucYYe1rPrJLaDzMh87GGVenKGqzP5M0wzDijBxxaH\n7LPdndq9s6/oNxP7WcOhiDY6PPsq4xkCjB1k7Yb1k7IHY+MA2B5x1e8rqjQI\n7vuF\r\n=Y4Mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQEOBb5oHwxQXbqhndTaGiqgOHBuR0p9AtATbR3j7UywIhAPwsQ2vsy/WGcJW4GId1uTGC5OSmSumVc3mI8xih7+/x"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.51aab0ad.0_1606784716857_0.7899048389561705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-button","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.8fd4af5b.0","@material/mwc-ripple":"0.20.0-canary.8fd4af5b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-f3gJPSjTjGx63BgIBXwi4eMxtAXDpdmHrebEvQE9t6MO79blT0BJTITt+EU3QdJL7eiWTEl+ELKygPcY6sAITg==","shasum":"7f111da9c71cddc29c0e33f48c8d61dc9e48f2a9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.8fd4af5b.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDDeCRA9TVsSAnZWagAAUBkP+wVfDW0gSYllHnly7ajF\nvE+F27BSaPR+/tBejSqgQ/b6W6/e9nbVW/MlBvMGDbj3unwWL85zsb8Miljw\n9cQYOiDP2Fq1ABaSB5FWEI2HjTSMiMeQGjO+Woc3BVD/wFs2TZ3s9mMRziz4\nvz1W4fzhtXTiRzSU8xI1kgN6ddqrNOwKlS7UJseqZ430pSVCWDeTpdnKnEMv\nQvYHWQ2VzvLuQkFEWwai2WNrSu+GrhIRjkSXPs9jI8mnp57BM1C+4mitfE66\nWyLS2G2eufaXL1idvdbneG18msZwaruXNeIwmWtEFBPrJrnSx7L9z57vjQvE\nMrLPHKIsJ8k5WbtLgGKHYpTGyDWWYEjrcJR42awoNWmnzCTaiY3oSFWYF3DO\noXaQc8vypEejMBPVErp+sGECVQ4T1pX4buNUwUDrHF2/eT0ujeistGUwi502\n/piFrP7ITX02fOqck095qacFhEcFK4LY8iVzAY6UMNCxCzjq+Wer3CjiJ/H3\nW0tbYgCS7PWyax/ZwPq2nDPapTMYNOY0NlkoGPddYEVq2nc6jKY0z/meq2Wq\ng9qOc1o0Szf1DD+o3FeWtu6CeceUHEScy5WBLg3Kzb8Cqst/QjWEWJ8aYJzc\nXTODxVF3CNeIuZScqUtiMqeOaRM7SUYV/f5l7XIG41dY1l5faI08BRYUBXfF\n3xFz\r\n=q15v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1XKFJNgbMB+UDWISYOJw8QOr80ygzqaHn0X4D0YOOeAiAmQO21RjkiGlJ4jTBqWWAME0OSCjCo47+piJ/dp/qdDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.8fd4af5b.0_1606955229710_0.3031812129629605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-button","version":"0.20.0-canary.26d14d2f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.26d14d2f.0","@material/mwc-ripple":"0.20.0-canary.26d14d2f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.ae27b44b0.0","@material/elevation":"=9.0.0-canary.ae27b44b0.0","@material/ripple":"=9.0.0-canary.ae27b44b0.0","@material/shape":"=9.0.0-canary.ae27b44b0.0","@material/theme":"=9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-X2XnrJXRx95ubn6mg8j9zkseK7Vspu66u4RrkeohOd9Y1egsQralzropuG4HzBPUqxF7A8wenxjLw6sS76X0yw==","shasum":"43de3826a359b5cb2862f1543afcaa318672d99c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.26d14d2f.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDeUCRA9TVsSAnZWagAAlc8P/jK9ry7cjLCGFjdKQBfB\nkYKUi/u4Er+3tP0W2f50QxaSRs/AQWMeL+VUxr0CUjtMvjdAW8v/Ug2+JQKN\n4v6OQJ4xUKJW/DTuUg8xGeUmrXWhmvS3AdPXcomS44bJhMGiXoC6Zv/sXd/I\n3pNLG6rP+FwmqyuTooyhUEtxCkYP5rIUYyFSc/Ygfvcs9iP5DmByHfl7tanw\nFktrWkohUcDdI4sih41mTkthntk6hW57RG7WwyRs1XV9sdOCOPwj8/F9Z9bs\nB/HIB0McKa+MCCul+1LkIcZDqgb52Y9Uxq2DKtFcZy8f9JDx7ZNPPqcdrBng\nSy2luCkTswMWyigljMh9yTMmTMK2glikaRtdHjy1ooj0uBRR4gV61cPHry4U\nJyGalVOmU/RqVsoQ/nAHOTciLnuNmSwjBigrRu0SRCQ4mVsmBhMBqVfNe2uv\nYEaLOaZshtKmjDL9gCjMonDC0ZvYW1moAYMLqP2HzwUoUilsTHFfaec/jtoO\nTdW+5J1LWhcgcV6+XQp4UsEe9FCMHuGxISM9ukftDyn2vx0/6pOGiA07qDQG\nTQn3qjtJr8JWKdajfbtq4iNFafTnbND3nn4U74/2OpDoKa9+f5e2nHwUlX91\nZGW6Hay6eV/7brBWXGInnG18IBJTmumuk6tIgIgDIX/oxsYwB5OVeQLYIlLk\n/oMD\r\n=Bg7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl/iMZ5okdACqIQGkvwTH+mTLR88hFRKWCnb+jFC+8ywIgCBXvTiL8Ln5TZBIRCCgS4xv0ts1Gm1V5GH1vfVRpoww="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.26d14d2f.0_1606956948514_0.4467932460539028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-button","version":"0.20.0-canary.1663d7e4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.1663d7e4.0","@material/mwc-ripple":"0.20.0-canary.1663d7e4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GHjl+A/a4MIsQi8PI73wtflO8rNUyAk8Bymu9B4xNoRS7r63bLUx4pIoCPizFUTt7DmLhqEzHAYyHZRGFUd+Sw==","shasum":"d4473c7bb95e34d9fd11f178bdb08e12903929d3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.1663d7e4.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDxrCRA9TVsSAnZWagAAJTkP/3Q3kSjX2/JC7CmWo+HP\n8NBFlo2hmbxpKrNSuYHiJ4IjZ8RhhkHOx4+EJZ7z+lDOXdqMW/0DqaT5reBn\nGWRZOfIDBlMl/pqjZxdwU569meHIKSXTMDD3X63u6Okw7Ogww7CIEJfM6hc6\nS23OHUKp4dEMhvNx9S7G20iBNSYNcARovIaxgPK30WAfUjt6hCYNwI5WkpJD\ncT/19n3mW6GOMCBxlEhfj2aT38r4LNTn7VqH+X4JOD7azyBCi/chpGL+in6N\ndTlqMxEIDDddqHYrcnSem8OEvNzxcMUgl9O3OZaZ4oBtovB51VcCFSuiWvk/\n2gey2Q/UXGdOZjLh1ozeGKMJL7C5pEEBDmPaDOVeBJ4hE128xNBdO8cU+ca+\nkjjZPlPNtLVEBZcGN+qBoZAowbrnyaAEqo5kFsE1FhCLD6BalKVWxwLSVnO8\nM3WL6+9ITBlch2i4KUL6+aEk5u90uf9xu1SzErlRWQsHJyqPg833WTroEK7v\nrSNfLeNu1WEV82GatIrNuNupOqhbyUh1vWFMKevWqSTEgP4bZQBAi6ZJBV6D\nQ4qRpu+AcgdMEHjO8qDtEvjdp7OCwZvt7wDu1bHAlszxHfqGbw8WqxQETt1H\nDNyGQ9IQkZyVDjSc0uuzvD7SF3ybbjKqbV7LkfdEPJWRMUJMBFQ5kXhaYAZv\niP4a\r\n=DsyJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFSAGy/M/hPnYzZpcnBHe9tJGuq8HUkAzDnxvdNWTQp/AiEA9fv3fZ/nlGyaVxfXJgBQDPmINvw816H5LgVyQYJJXhU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.1663d7e4.0_1606958186831_0.5305060290543717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-button","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.cbe9fc12.0","@material/mwc-ripple":"0.20.0-canary.cbe9fc12.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-45EVYJa3dbw3PX9xxo6H/ZRhLJUy/eKFY7UASfB3pUhK6/kLp8pCU8OdaMWuECe6NWC4Jfoqg521adjOcgPdFw==","shasum":"b4fb89035bb934b2f1d45cf9220b3531d1cbdf86","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.cbe9fc12.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTdbCRA9TVsSAnZWagAAxTUP/3colCYosR/91gXJmb0t\n+BmEHblcNGWakdJXA8TOJdnxZeDIgJF+2MJZUkODlXfVC2RcglzhbrSfal4m\nZXAwKtXVnXzSXadRumR549qQm3Mtju7qEp4zXidDnKVK98bG0J2+KDjlpsTH\n4frw4pl5VlaB1IydhCTD+nk7nDTXxksg7k9A87m3MQwj0Md3uwoHgNCzHMJ0\nb6RfizZf/sRORoyGh5wyiU5VODRCkFzHj4yFgg2v8ziXyUWc2TniHeExXLDN\n6hk9hik+FS1F8jFrTxjBi/JsVKEQCpPsBR9/6j0NUeGfYJsLH9L2S0QFzu3r\nzaumVzblCMlDRLxJQu/L7clrhW4O0vPshvcZXmPIv/6bybU0fjWwHUUWcQio\n8kdlQgMp8j8h4H699PU9C1v0RLkexgobwU1vouY9kZo6RQnGiYnDIC1D37+B\nJVvCN1RTTPsXc7YZxPQmdoQsNBKlq+P3u9OMjr35n8bYwKCg5ajyh3ptdONS\nTIsvvYWMfDaKX5nNuw0Vo51o4cPntLvmjYzyQ8L8j+rB6dW5df96dhGbzh3Z\nQMCeNDnFyFYT1slHVcq/U59mjG1g+8gvIS+Ft+ECFYGtR5BhODx3IuQWJZ+t\nFR5DpPEqk5FgweyuyRmicsuLHQ+k9BioqtN1gYkq68/qtvCemBKqMj1qIBz1\nUPIn\r\n=sY26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpvEykQB4AxL6GUchduhWptXXe3n2CtRyLuwlP9Me8VQIhAK3FFnpwWP6iECEF4Xah/Smur5irM0uo0DNY79t628fO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.cbe9fc12.0_1607022427502_0.30986650351373735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-button","version":"0.20.0-canary.9755be10.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.9755be10.0","@material/mwc-ripple":"0.20.0-canary.9755be10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.11da3c0db.0","@material/elevation":"=9.0.0-canary.11da3c0db.0","@material/ripple":"=9.0.0-canary.11da3c0db.0","@material/shape":"=9.0.0-canary.11da3c0db.0","@material/theme":"=9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MQSWu+6som7/fnpxffvGWVjGS6NNIVKroe8xs7xXu+rOIS+8Dcl2zJcgJTB7kx9H/ZVfXfJ8XoNf2BsVrOKzHg==","shasum":"491c869371a84b57e5f2818d50a7903b89520e81","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.9755be10.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTufCRA9TVsSAnZWagAAdIYP/32+B0ETwgZMdQ5zgRXI\nHFz0tsNR/O9/gOwvCrqTGZ6G/5S10SuZn7pXT4YK+P/Ku8jfoXVC5diYajQN\nC+Dm9xVn6bvQCk3VbnwS5mnAoLX/koEBovAUHY9M0udJaVlbE64FuQsurO+N\n228oRkeYgRW/KpPQHr5/SP53eXTMfP2aev6joYynejMrOeftpMpFa0PcZE2W\n2yhXyCmoFz8ccsS0bVk9/csoT/8Yjvz8Qebap7zLRbOTZDCKMCdP9AhvW2Rg\nux9PdeqQtl+9h9ExL8HPHvNF4fJPPxh5hNonbBhdtMUS2c+fCx29ugs6Ptb+\nEQWL6ItLBPUUv+h4xQcyO+Awvg48b7efi9vA/5emDadGrDJEehdIQEDC8SP1\nMpjLAN3j3rK2+0cLLZp3IdFMBUTsaJ3r5uu5ZQaHDUF/1hsT46k/BNYPKVC0\nvc5yFkWgsF9wd8RPcQA9ypQkRY/aZ0wFexf1aE9RMnyefTJJt/foFBuTmS3J\ngKCYla91XCP/Q4sINGEvjnqd+YKpHUE0IJs+nO5bZlb0rl6V77gyeNruboo9\npOtC3vjih8NKDUwBtgdQMsYUbNfYB/xWzR8sVk7b8hCoLZn9VSh+MeWyYSkg\nW55mHsmlQk8ex4DviZTG6vYv9LUJLIa25ZochoR6UeL3dWMILnaKUyvfWnZN\nUeXk\r\n=ty4z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4tuUiQHaCYUGZCWRw/VUM1gxihPMyRNBoOOx/7ch5xAiBcdlZLPO7tWfP4wiUKQfNJvoLYwAqzeJ61gXkPKEPkrg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.9755be10.0_1607023518591_0.701342729618752"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-button","version":"0.20.0-canary.3f64270c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.20.0-canary.3f64270c.0","@material/mwc-ripple":"0.20.0-canary.3f64270c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3ejLfePPsPL38+wp8jrO/3cIPum+JMsTNQEuwXt0N9dIXpuGSdV2IMgxL0tkmNuEHx0K44mU5acmCXVG2b749A==","shasum":"467acf5c23325800acb318e388208924ee8704d1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0-canary.3f64270c.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV14CRA9TVsSAnZWagAAXMsP/2L4EctxfTwp3gB5VZKp\nrLRlSIoLDgRuh7RLK8+e+e0l3JICWlEyCJaxe33B0D07TRw3275yrwyAGzLs\nAB200Hwgahrf/LReC7IcGoVdJve5uu2JvzrIxYB2A8wxvV2AK0N1Nz5KZYHJ\nwDf6s1HE+3wtRmPSxrGjsnTI5gNMnfr8WrQ0hxSCJRaV6NHaO0qwkdBAxJOt\nRaiAe581bWsKEpaMu/XPtF896pdUUIy+5j4GEQWTXIoyQlbqn0zBBdNQMir8\nDiCHF6/2L5829FNcHfSyGjt0/dzk8UbalM+E8DIWKF7V+iteR68xsfJ9m4iQ\nSCHiJtbq5hYqOwbcmoQW7fRMxz5ZewDpCzuNAJukr89wrvLR1TKrC5uqLvZe\nEA+7+nr3jgihdXvn5x1HJR3FAv0YlXX2U6b5Go6EGtJ17eN+Fqz743v5Kj0A\nELNkEWR/WKPlQDiEf+UgL7pm5Zix+jlpwJNe+XCCK6arh0wLHosSBPokOO15\nD59rStFVzhXG8fs8lTPFXxzia8w3EM8NOoFvCWi68pLkAUYVgAAFlT+VrgdV\nZwOTETDM1ecldTbDchCf6TXqxBbC4/A1gdQO0R4xZ3Vca8ao9zwaM0/XfZjD\niczUpmNElu6Kh8CjKeD/g/wGHkPVnJHJGHG1Bgwu9JSYx/JgGpYY0CRpB2tW\nGORh\r\n=9Boq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgH656vtYVoLXvFDgIFPmP5fzvR4cCW2pvHz0p+MCEgwIgayhHTN6DZ8y4R4+rGeUNLjTILRMxFlXCOtfIpCdG1g0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0-canary.3f64270c.0_1607032183419_0.29851272981713595"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-button","version":"0.21.0-canary.d893b14a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.d893b14a.0","@material/mwc-ripple":"0.21.0-canary.d893b14a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ihtrqgJbmtlhKxPVu4DQS4gqMTHsozlc/OF1eXtKwDRBj/mTEdPpu1m6as9kla7lrWKj7oftSbqErAf2/kxMRQ==","shasum":"6572745c1843990ab7cbf83dfc781233b62d4df2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.d893b14a.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWX3CRA9TVsSAnZWagAAfREP/3PqMq5iIULokAsF9c1Q\nOh3zeI/nhe4DqdskAsRleB/rtfN2uLKVA7sNra6U+e0O2XfKx9Idqunhwize\nAoSUhitYBFX5HIRDI6RUtypHU831IJWXBUh+jFVfQKHg8/ZvneRA+pObtFHt\niylEn1tlZFFzOlGk6N4LO7QDcIUBpXeESlX33Zd64nRxe8DdkGAw1lRhytuq\nEU8D7v+6jsXmjI1icnv3/gWLqfZEKDBBNYejJdOWyz1cjHAOYIT4iILQ7+C7\n7YB30jfMp2D3j/zzGSW8medMkDFksVDFiV+B6D3hXJrsnf7YLEhMu2hoYqoB\nkwnmv/l6ZdEf2KbUvT6bKhi3tfDr4vkrW6fMV2LuS6b+Wsa6WecBsyCXMroV\ngs5zc2x4rtHEkvNT37KrY0qscmaLAxeheGxUNcjBaQ0o46YcF3QUPpgilgHh\nfZuP2sLiH33xbUFI9UiHPJLUhh3fJ5j1hGepcdLW8Hpn6axYbvR769za2qh7\nESCduk6aRLPhE2kGO50YmYHB3C7i8GWfeP2N4FDDY0G0CLN/p8rJMuXd2OEp\njbkXKYfteheVrBjfBgHITXWDHCxq89Sw1m4D8F95QF9vFnUVhmDuePS/UKZu\nwaWy64xJFA+RWtICeAUoc5yprXFRO1NeTfUrjnml5seIiHJG2qK5EFRYsl4y\n0wtv\r\n=tSkD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEmKqZoHV1q0Lpmg1l5nfBiLtlLszrCCmMPe9C9ztwkfAiEA9gKPkyGQU49AYatHEeggZFOQUBDaarWNXmGWkWFbM0o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.d893b14a.0_1607034358941_0.37648072912441854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-button","version":"0.20.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.20.0","@material/mwc-ripple":"^0.20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"d893b14a0846777b90c10839f3d05c36bc34692e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-kqQpeuLfaqfH4PZbENT9rwx1sgeFPLHuKy5M31ZeKG1deRTxw11FDGeMxSkePfm1QFfY6DNTsIAG5qC56tUNlw==","shasum":"2942edb504f4cee4d8f55b667b8538f27084b772","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.20.0.tgz","fileCount":20,"unpackedSize":83383,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWafCRA9TVsSAnZWagAAW4IP/3kcWfhpw+wmUrZ0Y/p9\nRvyrjjCv99DcALMeezPzkyXDSzpOwK89fefE/nwGpXC/3Z7QCFKCBXNWMlC1\nlbyAvT1o6hjnDxlr2FoOITmSYP0SpQp8uUfKfo9IMlCKnS0/WtyoSWRPEXTY\n0GDn0ZEvzmNb522V1InwVKzJhytIecq6m0wb04EkNlYx/4NGST0SzyDk2b88\nd9UseU5rxZOb9UDK9jmuIMiCwOifk6RIh41NCtFP16/YoqmyGKz7+AKwGtJj\nWzP6QljO+R2R04aZ60Bs6iOyYws7vGZTrGOKMRa7gqgTr4yNRLisk4zLyT5U\nGEK9Atu8PBomITWIKFAvIO3j2IzBk24NVpZNDjTvIKzkVvEJ5YnxhoIe7A9M\nuAPds+Hrx20671NXQnZPaQMrK39IoQbJw3rFHMcGQMyzrLBaYdI5TeMQGNPa\naP7L1DD+GekcS3RZPMDvQ3DHqlKdCPuKibnOEPztVUNfdnEX6VjWIDVFOP5h\n2x9zr31oqTJZq4vHk76ho1J367tZBmsi0YYKf14Pagc2Cy8yF982MVhIZc3F\nujVloXiENTEgylD4D7+3aVhDZVbHXraz4eGd12CwfpRJvHCjmxyMD/UJXfdQ\nU/ae5IlUHGx40wo8W/SUKEGr8LJ6rjVbKU9KCRQlkyc6bzqQiDcJRSIz64OI\nE6m3\r\n=VwPP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcruMS49tU2ms/uORk9sAho10pfe5nJx8SbjAbPqoQ4wIhAIIwpqS6t32Jlqo6lltFO2KBl8yKoEexBCwU1Z/K4Z95"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.20.0_1607034526659_0.32250479266823473"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-button","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.47c7d7e5.0","@material/mwc-ripple":"0.21.0-canary.47c7d7e5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.1c156d69d.0","@material/elevation":"=9.0.0-canary.1c156d69d.0","@material/ripple":"=9.0.0-canary.1c156d69d.0","@material/shape":"=9.0.0-canary.1c156d69d.0","@material/theme":"=9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GdXZTmkwrKYx+WsDlJ7FbOxe6dYgkco/AwM00U7ozN07X1FdRniw0OvAVlt7RuNYqnqToHRlw9keYogieH+zSw==","shasum":"bdca96fab1ae6ab40754a59b3b098e64099fc8af","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.47c7d7e5.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088DCRA9TVsSAnZWagAA0DwP/R5QwTSgVvvpdv7XFpqJ\nBzHXW+SQSmY2SMcbMfgAZZ9uk/isqj+DkX5hjp2S6piFxfNM2hz5Mxjq83Ce\nxd8ghKXIXEahCf7wjQPUndKxQEnohU9tJ6uxvDaDn+w/0MznXZ8aFwe+/VyE\nZ3vxaFcZcBTdMGKt9fqTWNSVwi8Khe5vcR5cTkT8OWVj/4wJEkyOGgg504W7\nEGBz1AA4nWQws4LrM53rNfmv7W2kP0Ufl4NZmh5odK1SXxKV+gedDrfrWMTP\nrKqeanhId+6C7CVR1U8temT9LXm50/O6Vx/QbduoXOiwLpfMF78+PhDicVTq\nifBmLmH9UszaWP8KRcvEKDF+vz+2MtSQYex2vGyGj4eIuXT//dW8qxJrzbnh\n1FvxHHxfle5nZGg62vJQnVqNq5a04a2IgtUgrIlBNY1enuNKlobd04HgMpWl\nw/MFuTnctPn3pvceU3JoN2kZCH9yIMdnZoHcbAwvoeIYbF5O18ef9powj/Py\nVRv/iPyRUnJOu4lJ0+uUiZwqMBQoM/BEV7mn9QW69mU4HPdOoowS8RSjIU/K\nvL61fzuL86RvZjR5jwq1rog1QgEp4X2BUeDF4EdTx0v6RwWLMaGgPU7Ptg4K\nuFh+12kvRyyMto2eVJF+xci2tK8wChcNxJM1EBWZ4qfruNXEbUo3IiHmTELi\nCY7a\r\n=Befq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLil0xNlLhxzwhKZUt8DZH5oPpB1ypR7WFQx54tOROHgIhAK3L4xME3cuMkjOBdVHpm9jC1iyPEbOelF5LDNeLgnOr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.47c7d7e5.0_1607716611198_0.6013838190088532"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b304a78b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b304a78b.0","@material/mwc-ripple":"0.21.0-canary.b304a78b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.9244508bd.0","@material/elevation":"=9.0.0-canary.9244508bd.0","@material/ripple":"=9.0.0-canary.9244508bd.0","@material/shape":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DXayL+pNNkGTE3Lc40eDgDuyDt0tfgBoTY6iWIOQ75F1WjbT3jLQU8s39zVbl4HlaaU5CvIvhWUXTZqiDDwyFA==","shasum":"322c4385640547c06083a9a85b8686a489bcf044","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b304a78b.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RapCRA9TVsSAnZWagAAPSsP/iNHlUJ4hYzySGKRyMRr\nnkwnVDzkaKuQKLKr1uAI0wq54QkwV6HuZZgCT1deGTgNLXR5o1FrCk5S0Qpc\nmLxZoLMQpmnXKBXK5hj9vgWSBpI6itQpzYjPpONPL4mazhUNaoSfRACHUz55\naxeHVFuQOKv0zXwVC0oQrPLH/PRA8Vq87mFawxn4polzykphcWBWT6mTE9Zu\nEUWM92hvz55pENyKVBXOGld2VVwV4omGArmlmozSF/SCTZ8+6OQ/L6pnSGC/\n4T6ZdWjEjta5tvJLb3xu+Fd5xY2/ZTSmIW1iw3X2LU+ak54G4J7ZpmzKOaAn\nd00kZY/Pz9/Id8EMoyZ3hDqVEwZUpI39nbGS2PjdZPV0atj55URKLuiNxCJJ\nmmonKnQ65pbUCy6+oMjWExZNa0FJBd6ZnooCZO9kDUiiJRaPtzb8ju3Cq3nS\nLHz1/N9roMaXRJDdNZyx7MlEzwQwAhWK1pdWvAq031G9wfXrbaEWrLR4nCVf\nlcr3t49Awxo7le/pdD5ObbP6lOvgn+aXdd+DbgCNDa0GkNRDVjwALBGvQrC9\nhNxmwsma4V/CJrtxwBRq1HGC+0UwJIiZ4Q92G4hkWm9M+ADrp1LFsOGhotTP\ndAk1Gusft57dpm6i1CpgQXemMzgsTkMsNZ+WaRHWuWi9ReeZAvMDN92edBgC\ntYed\r\n=xgyv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWnNSHvrP2R8zMp8KXCN6RvoG8xXrCfwKbsZV6JufLFAIhAPaZJ9SEDyAgFXEWeLry71RoMMLkrzijSPcM9pA26POF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b304a78b.0_1608062633480_0.6844948508880917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-button","version":"0.21.0-canary.777c5fa4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.777c5fa4.0","@material/mwc-ripple":"0.21.0-canary.777c5fa4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.9244508bd.0","@material/elevation":"=9.0.0-canary.9244508bd.0","@material/ripple":"=9.0.0-canary.9244508bd.0","@material/shape":"=9.0.0-canary.9244508bd.0","@material/theme":"=9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8ZPJPCvS2Y4yxwu46/VzPsR/Pv4CpWJ8igIiQfU6fGk1hwUbbdGngp2TcSGF6lqe7h6Vz2TmeE31iy3Nup/0Xg==","shasum":"ba5b298ae7507c53c222bc426cd764caee62d752","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.777c5fa4.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oH1CRA9TVsSAnZWagAA1lIP/1ecVbMcfsklADaAn+kD\nwS9iaOZBa0G0LlrFG4jprE6mYkWuBPIE1xDx0J5LT/OrXGQjO9LFRGN99tJp\nqxiezj6cFtmbt5eFPbQpG5Jgm8oZZA1IxTLGsK9ucu8KnBWbg6GVHp5fialq\nUInWH27MUePGydxP8bzKS2l6hBEuQiiuqSA/sqAAYx+OQaKhuQ4DlsyzzeR8\nlIHObXfvRFCHty0QoYveRsE0Neq9rmm8tyEVEXgS8kOCg0HohSf+oP0tAQeB\n5twgSJh3sJqKWlkVPknGYchgHYnxtnHTqD21fuCqBJt4vKF8sNiUi7FelItN\niTOUxgA6Gn7VrEJhEge5wXNbFCwKMU6ltSK+iWc5OHA8B68WZ27YRAHxznRG\n7OGSAga5zijo1drMgAx5553AWniR/a6+WSfUp5NQTOnobYryViOX+OLLe9yL\nB7ql1vhJUs5GrJHiNvLztZ8ZVvfWiIE5HC8Bqe7DiBUrI+5smbq8BGGJhzBW\njAyY+ObVPB67b+a2kLk25UFvbLovgtcY0QkbNkKMFXEzrysHYMSy4er/jZv3\njZYeRT8JQFDA18gYEN7FckmMubzR0/OY4UEK1Fmm9JV9szQM51I8sqTsrbX5\nKbMzQA/c4GZfZ2yeZzyqAjZmlg0nhCcQxfucxLf9iAj2KbDAL5GIdx4I3sap\nlYYL\r\n=Rdy1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkKdj9i9wS1E2DtAyk5aieH1qaxaDOoNLAwiC7P+6plAiEAvt+2Xhe7TBt2LNO0e59X8Oe5OZv0WKYfjfeNOFWIVyc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.777c5fa4.0_1608155637151_0.4514015857354967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-button","version":"0.21.0-canary.635c7996.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.635c7996.0","@material/mwc-ripple":"0.21.0-canary.635c7996.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TQLpj8G3Z8AtdAzonszctQNZXHE70f2S0hE7SzBBNoYlit3guIRGgiC3AJXCkxtmz9jxs1Yl8DaVfY+hy4UlFg==","shasum":"1c59cc5f3e6f15a41b279c8e1a71cc5f87561267","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.635c7996.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+pkCRA9TVsSAnZWagAAw0gP/1bl1iY7RXVRP4axP3EB\nm4TT1EEVVAhpa+Ck8hgTOz9OVja24Thoncf9xG4XAKzka36IuFhzBj9iTlD7\nx6rLldkdtfDLKt+IfVDbKf7Gc1JMp/t3JMgKEbAhx0fOAkDp2F4Fxm+y/sIW\nTrGFm9S8k675PHsyVvxSIiZGHaROyZFcvLLy1wVRxB+6jue5R8ezOuBnkdBC\nsICI2+UHGKBCXr7yS8hjHQoZLrJDq8LPUOWXY83PM0H9vcymWo4HZQASLUXe\nGhTZ0D3pBESTouTSjflLXx0N9DfFVjDu27Mhi/+cq/Z7c+AWaT2rKKV7q+zb\npKTQDa+sK3r2TDRlhESXbM3isHddFwGVaXfQwv9HKxycSGO1rYceNoss4T3Z\nAAw8LDnPrKxPq+1s8Yh9NgG9Abv6xmsrZ39bj01zTPkfnlgOtwMPt/LfqHta\n5Jo+aBOWNqV5OOrA5Wkcqrd+RUXcVDKDJ6I2/mu4BEBB2Pl3pywb84wRFtDc\neOKlBfMFIOGiDoKwjeiUHPzL34rFKP4eBuV85e3tvYdGCoB+AQUcqRDnNBen\nJO3PVsmfarj2QCIWwBvrQfEeIW8+PWH07nxA48E0VLw9MxUMhVSU9bCwnxAu\nzqyRCHMobtPzTsBiZi7tiMCM2SU/4RNXCvmmiye98KnEc8/JQUq10S+8HpQH\nkEDn\r\n=dBic\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvcZmNrGqApzWHSXu+M7f3rooB6ixFX55HcDiBrOwsawIgIX5X0NlbPJ/s0eBzn203TpXPSbT5ac4pQ2ZCBUeGJpU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.635c7996.0_1608247907638_0.2890292512553745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-button","version":"0.21.0-canary.20b0045f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.20b0045f.0","@material/mwc-ripple":"0.21.0-canary.20b0045f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gAkD2jdde6XD0kXG2S+De5aemU/BF49aAck9vpXYHqcmQkdYZdlAdumSLupysNcuPMVbaW4FOWHNSzHPbs+xUg==","shasum":"08804e449f71a75e93001627236b5d3ed2f3853e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.20b0045f.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+5hCRA9TVsSAnZWagAACAoP/0be6r/0302zqJwtViEj\nitBduiQvXwAwfGMPJeRsw1lIub7oxPxZxgO8Dn8p7KFYMCcRd3u5HlNRIP1R\n5Qkz50PnoIFJfVcoIFupDDdxdp9EdNucyXnAZPTugic57NrlVUWVWJvEY2V1\nGJ8C3Mcmm37gQbSzTYcvoDOdMNUUeFkOV15uXYsfKkcbVze3nxfMoN8/MDnb\nB+OE3O6SlIzPPGKFKK9gXAMiOaxz3FTq4hVYbRw3ZJLAkKM5uwboX8j3Aer4\n1MKyFycUX+PIZeCu2XM2N9so1G5yifT1LzgY9aM5sjzPsd0AVizpsua0qFp0\n0ANDWvcg6rjf2rockDaYEPsxr86V7S76niULyTLvpcLHv+JZws6U0fEp70ok\nU0WMAIw/Gs4Bl9JvtLQSbDUFsztGE7DIN7readcWGnXYRewi0VrKGPVilS4n\nHvStcQeRF10ewJiFGUyrFZPZ5cLnygw3D8r3e3qZPt12EXz6NgF0JxPSs0f1\ncz3ymgwxaPq/nnzeXtdeGe6hX3sBrUPXH/5SK4mQHpv71tzl+B0++oMLamPj\nXqPpapNjbtTckq2e+bBm0uy8wpDcs9a8gE7PyMixJ+BEwgHhtppk2GrFwuAm\n7xf+vo6FkAdOGmVfDcTwJ/5tPfXPw65rpT4LDmp/XtnPxLv8sYCXs8eMVl6j\nhbhl\r\n=ocT8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF48Q5tKzdCoLB2ddNMKLTaPRRpMNdTyy0uSSaxoKs5eAiEAwRA3GC5K1pZ09y51EuMzxQ67tlcE2GlcPgqWx4klyAk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.20b0045f.0_1608248929013_0.14118169172485495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-button","version":"0.21.0-canary.41f77000.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.41f77000.0","@material/mwc-ripple":"0.21.0-canary.41f77000.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Iuu/TsZW2cajGj54fKBmF6XGlRNskkJo90SdCeYgyYvvwDMeM5JR4G+5/dKGiutmA4JxU6RWdd1q1z51NSQvcQ==","shasum":"14f0474a43856e80e7ee25e246bc90b02a6483d0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.41f77000.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/k5CRA9TVsSAnZWagAA/p0P/ilZcsegno+fB4t8AAsN\nzSZDRtZDn79dpUldG1Vija0rUaTGSV9aFP+fSr5nrqRrNJZQJ2azg/wPO2vt\n1n/FGHfLx61cbKXbXMaiSMaiMOFhAwX2TtNAq8YENTlWoXUTOIRlu25IV8sT\nF8sqY3Oyoe+lKcW4b5eUrcQvMLqqOGt0GJHswlRWciiWlu1h+mGRiKH5xzhT\nZeLifsQYvqryaKx+sGJq00PiLV2GOVyEI2k+RcZMzkxaGlOcV2Ao0LGSXSjZ\njit/nGsJRWNEO2i0g+e5xOSnJo8iyRepvlIm7/EXe+jJLVA5nxO9oRBUgN//\n7q0l2MFQ1qtK/GA1wDxbO2R36VIrKJofbFqLX2ja8ewGNvY8t4lv0guz/lHd\n4b1ZpVeRXGF3fKapSOTb5ahHwxjbbRdISVm1laxtzOfKC9NFNIc0EsmqsTI1\naFNu+fmsN2A2arU/IeyJa3oIEy2/E8wDtBdSzeyJR8YIVseal3Fnt1vSms7Y\n/kpz+bgCH1YlvUh+ip68oSkHIw7Awbe5+pcWebLjLSXKUL+fcywWTfpvqAkU\n4Fll1PMZm1OduZmIOieRYruujyhXwjBizI+w9jINi5ySXIFLgDRRY1yqa5o2\ne9TNoINPsIyATlLrbX4ufHu4D9eR9i0AkV9oaLxBJbObpAP38A4Xo8s3iBvy\nJOkI\r\n=E2N6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYcSdZ9lU6OLGTYVGRnxgSI/lIVV7PqTOXxrerw69bswIgBseZcymW26ypAmtzKfzO6I52LAayuc6OT93wIuwFBsY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.41f77000.0_1608251704784_0.6803070957130153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-button","version":"0.21.0-canary.afe4079a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.afe4079a.0","@material/mwc-ripple":"0.21.0-canary.afe4079a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=9.0.0-canary.30fdfd06e.0","@material/elevation":"=9.0.0-canary.30fdfd06e.0","@material/ripple":"=9.0.0-canary.30fdfd06e.0","@material/shape":"=9.0.0-canary.30fdfd06e.0","@material/theme":"=9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jzjD3iV7pWopakd3eZBNbwniNDgPQ5BX2tD1AhhdBQ7gHhbozww/uV777xC9cKKN5dJhhhYKAw4JVmAuArDdxQ==","shasum":"caeea905b60aa66a94b0f20dee732652711a707b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.afe4079a.0.tgz","fileCount":20,"unpackedSize":83435,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i9cCRA9TVsSAnZWagAAX1cP+QF11s4qOQwHyEs5Z14y\nuKLeZFhxYDalFLFkq0CPf4/86QCJOqFVbfVrYbHI3DdGf9NAJs1kkTgBgBE1\nkg3vLHZQPI1g0artvB8myBJIzBer765YDyLu/csZGjhWMOpqXfNAOswnJq7v\nawrMbawj/9vOjWCXphl6NDzWP9XJByuweWzgtiWNyzHY5Vp+ZKqZpObSqIGh\nYje24EYRV8PXyfAZhq9lVbobz4HHnEeN0e7d5OQS39ypLwHROgpBqhCQYoVL\nFMG8Qz6uyLtUZ02+GpEoN8yyQ72NZLFt9IovqY7BZuRFybpN3+KTR/GleZ4/\n+GdfYM1METB4Cwm3AVa5H4dhWHH0oqyZT2ULHo8ei2ZXqOk6cceB5e92mE6g\nhwgVbpRdODTo8/ZKhdN2qdUWmuoJy9FF7AuzGRNfNTWZEp5RjPdA6yNLFdAG\noulw7ZQ7ETCmbiyeJxzr3TQI00dQvCwnkuN35J+3qXe/TjPpzbOnlFBRmzSK\nz1d+f03oYOUW/Ap/+eiuxfHxwGEFyY23sSnc/7keIWDXeLSf6Te1iD0Y6XMq\nDQap8KBir0/CHV89n6aoP/2fDzNKGQWb+IUKEVjunPR5cGXFUJb6bbIP0p+s\ntw9lIFBItLDE9eUvP4fvRIBS1Ggx4nx+UP5XoJfraUdTldy6UHfqouzu1Kj1\ncPJm\r\n=MFzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtNbFXrc1i8Pqjy0yLwtQNWS3tbzBr4lWJMUpfiMyZlAiBhhp4OPwzTOqHnnjewRy5V59/OLBmyojeLLc7a4BWQjw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.afe4079a.0_1608658780476_0.31476473665250193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-button","version":"0.21.0-canary.407ef8f9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.407ef8f9.0","@material/mwc-ripple":"0.21.0-canary.407ef8f9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.671d72d95.0","@material/elevation":"=10.0.0-canary.671d72d95.0","@material/ripple":"=10.0.0-canary.671d72d95.0","@material/shape":"=10.0.0-canary.671d72d95.0","@material/theme":"=10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MY0Xs5zWWQShkRjGtsVwhFnv3k5ZxO8qXxFYhWtsNtcOjmV8Hw81cV5OmcX4T5Wh0gRhaV9gnLDLIx/1shPnrQ==","shasum":"1d2e12b5ab8775f8063116e15d5c3794d5ba88f7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.407ef8f9.0.tgz","fileCount":20,"unpackedSize":83440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcPCRA9TVsSAnZWagAAW1sP/3enWINOD/K8ZjXKESzt\nrxfza4yHYXBVkcnU9Liju1PAh9bsIcNszwFYhjuS8aq9StVVkHoxYU73xf22\n+PNuji2aIGt0BL6i3aTTtT/KTOok54Yc9/9rAsaBs5TtAQyeg5sUH478vLhX\nP+jT0NewKjZU1PtxAiLvk6241VNe7TmmAxxta6K1Bpk2wYRWinH6Ugh1RRVr\n23CKtZyPuiPpoeRYPZ15DaWRXLhs/vSR236fj5GYfgmPJjQetzXVB5JbASlO\nRHcpDgj6EpIRAPJjuZtfm8EoUQ+MKCZEPpul7y1hNWUhudzBcvEsdmbR1wUp\nLFS9nr0lwWORqWRn2zq812DiNhoeM0phhLCwWDXqpi/1CjMRHcIBU0KNtbmt\nlbYyBOHvV9ODYoQrJSvHiMsskSiFLfwFsOcUJN4DZBCoMoxAPOAVDHU32mAB\ni9C0r3eMod7I/qQKDWcFabERy602fXDSvZFSqPWs/YbPmBmOHmXTYIkWFzCb\niUimcVIe3ztIVfXnOU8kQJmj2E0nyKvV2ryJyZU5Li7KjhIg+Q1zyZbF4sdo\nPhbl4nvxv3jsLenAWiM2EJt8Af24Rr1UIja4b1EW2fnGt2oOr8BsF3hg+8oo\n5clmS/w4pxFvyp2S039875WqRktspOmMGxdPXRnuWpOi84KFPEhVZo3UcIZR\n2t9Q\r\n=Wb2B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICogrNblGz0irNZHK39R7EOL8vb9qSQxNcECIzIeCcP9AiAzb0K3PH7gbnRtjciwHd8NfKccVfqRP6BKYy7D6qgrgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.407ef8f9.0_1609369358671_0.06583074946836898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-button","version":"0.21.0-canary.2e26e137.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.2e26e137.0","@material/mwc-ripple":"0.21.0-canary.2e26e137.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.365c69360.0","@material/elevation":"=10.0.0-canary.365c69360.0","@material/ripple":"=10.0.0-canary.365c69360.0","@material/shape":"=10.0.0-canary.365c69360.0","@material/theme":"=10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lmY0/yz81xeJqOlaHjC5QXTBVfy9v+vCTanhOtMdKis3n6mOmqWgasGNZfrHfyLECbmb4NXE8/SPUFzdad84wg==","shasum":"956aa6ca3ed08f8499e21d4c5bf90f266725af38","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.2e26e137.0.tgz","fileCount":20,"unpackedSize":83440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTACRA9TVsSAnZWagAAZYoP+QAQ/sOcCxnyLQCaFpgj\nYBXO/om2heN7se+ECx9NgnyYkgQcZrO5KKUi+Wjtaame103Lev4ukX7EbSZE\nW78TI0JA4OaFTwZ2AUIY4BdvU+Luk4WU35eQG+RBKJwEm/gpNAZ7pOyYIw5s\nruJPpuEZezFvOejfCquce03lxWGXc6Ucwg3+JcCXtTealpbbcorF7GY3ZowZ\nk2dtntWeJcLkZjy1KVq1ag1j7HI5tlUTXA2wYHqzuu7lxDgOZiuVGEH2yC/w\nf+KhPlyiow60719dEp/L6VlR4x+rulDJKhZ3fqUNOReuKlyzBmZ4GpHHq59U\n7pY82/N6cD1RcOQYTe9VIJ4OrrUYEsbURi6+oRO3Aza2xBVNYT8HFLbt7tc2\n3SbbsYAE6Rn4q7jL1iw1F2RZfylXDJ7Q0Cz4PBy2S+VljKCUQff/cBZk9xf+\n2OrHOlDAyehHYFy38YTmZTeXRYdyHHv+12X4lbfjTLLmEyJvUjbEXL897MPx\n42Q3syCz9Jn3A4sbmDgmo7Mb6HV/AuokC8uLsTVtc0oz9HH09gPMs4Yhqayc\noAJG4nMH61vczGU0OzSg+bTkHufATmaIkL2XJPjA6EEdbJFBfiij4gWthz47\n+31IcYy5jlut6ZCGy6my20wyQ0iQQYYt+jkouhz0yxIJJpeaUqLe3Z8r3hny\nHJsV\r\n=vlLX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpS7LQle59j+yFifLmdZydr66wjmLmJuRHL8M/qqVh1wIgIaYa82UXG2D0++dFEx0s607CIP5862bDcSt50ZajmxA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.2e26e137.0_1609872575841_0.585539982367399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-button","version":"0.21.0-canary.9009f6c1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.9009f6c1.0","@material/mwc-ripple":"0.21.0-canary.9009f6c1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.abdd10065.0","@material/elevation":"=10.0.0-canary.abdd10065.0","@material/ripple":"=10.0.0-canary.abdd10065.0","@material/shape":"=10.0.0-canary.abdd10065.0","@material/theme":"=10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8PLtgEEkLxyI+j3xf/9P9L41OxB+rnsmmsml11Jdpn1mC7GD+IpzRl9zeUoj5XQDsPXPrALUejyMH9QvCQ6HwA==","shasum":"f417c0857aac8aa1e53b4eb3dfff539a740eb037","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.9009f6c1.0.tgz","fileCount":20,"unpackedSize":83440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LhnCRA9TVsSAnZWagAAobUP/34YeRwPjpQjbZ5u/3mQ\nxXdhJ6i/NrcbtyHtWbC1JhMpYppk1fozxCzARQ53emhnAyHlxtvRpnN4y/ls\n/G/zKFPFQQmDN073aG2WFG9vMYK8Y5GuYR/JUBsB2+98tkPihc+0/fxlt+Ft\nQO98pEgULOX7qbLHT+zdzBK3gICf3UeaNiqaA6HDAIqIoDMOfKNXjZWFOdUN\nbll+Li+htTPSatwf3eshkQYH8obg6V4ho9ejI4tPovkMDBf2urXwgW1NhOz1\ncnqCFTGdSMo0dzJJr95dLB45xm/9BaBdvv9xvEGOQoZ0zIh/ViUxWiBSh/BV\nr+afMX6JZ3GJ//IRe9yXuBMRiNjnPHBve4el+MuwIkepJtJkZ5036SVahGSQ\nmNJqsabA1dlfq7CcPrbmEg8apBsNE6qb/LznKQv6LacpAtHdFhIStkRTXbPT\nURh5KIgFLmX/8iM0vkaEZP3EKEd8isvpQ9C8eOlKgIEjWt5kO/ZWyzAMTuwE\nF03BvGFC6XalVYqd03hsE+ExDF/G5UpJGNnzQngCaqUqLIC5eGHUAKjmwhXZ\nwE5dBCQ+A3YqqOmdJ5ILOBTIuPIOpTzga5YADrp+Llzat7HRw8v8kZLOjzG6\nYECoNU3Gb++yILeTV3tmzLdc2GtM4leWPrhwX/k+5u0ng2UhYkty0jip6Ljq\nr7/E\r\n=tu5E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBiwvTzSd9aNy6JoIjcln3H6tBlvByOe8wAymqA1IVL9AiEAj12gaZIUbZH1iMwN8rF8QMmRpVeB/sPT4apVCmIHwKI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.9009f6c1.0_1610135654848_0.5950902696027052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-button","version":"0.21.0-canary.ee99b646.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.ee99b646.0","@material/mwc-ripple":"0.21.0-canary.ee99b646.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b8a1a58e4.0","@material/elevation":"=10.0.0-canary.b8a1a58e4.0","@material/ripple":"=10.0.0-canary.b8a1a58e4.0","@material/shape":"=10.0.0-canary.b8a1a58e4.0","@material/theme":"=10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vkm/szpSGPMYeMh2uLUhxde99aO5FJwN089GCSVoA5L7QFGg9qWWiNKiOj9R1aksThh1ZZIjNhHO6nhMi+Dlow==","shasum":"e1bba99e2f45c3b05a53450c94365e15282cd342","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.ee99b646.0.tgz","fileCount":20,"unpackedSize":83440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpZCRA9TVsSAnZWagAAD2QP/1AHRfVoJA2x17L7okKl\n2YLQJ38uItH1kvhzcq5VS8XcnMYfyy+Vh1ue7E+XCJosp7pBhIuAM1RFleQA\n3aHjbUWomwKC7u4TG/t6jTIaElmRrzcuAoGMjd78zcZLgmHlSbhk6CVHJfyE\nq1BEsZWlBYmI1wHOc0/1HuYjd4NxPDw+EcLhvRRSzfDMOzbkyU+KAYbTiu1a\nPkDnYi/CuLUuc063WTdiv1a0aG6VRTw9uXU47uYhS2embmv3D8yPVTj8B739\nfsrnFbBw4HT4cFVufEifATcJiTXQvBnzhtKMrsPdKB9Ic7LckkWyBzACgu/t\nvKmSWzOHHOh4IF4GC9SKU6dlJ5VspdtvNmPesLBfJe6NiLqNs0dw7AgE5pEx\nbDY5ALKQE6HF/vf+Q4vLWZoByg5/77XsOkViVfsiyyMA0SAhc+ovurhCJIKB\nnIIJ1RtVurLi3KOD9B+PE1PjgGym+Z/xZIyk2DT92kbW6/w9ZAZK0ZIjK5dL\nSi9hrabvHah6Ltqp7cWHK3rdkVf0HUF3V6KULywPRj1zW5E/dWM8InUZiGSi\n6oId/5zRc6we9eRT8jUcsmgWioMf5aWsy2vQ6s7jbOq3TujXHylqwMV6fW9m\nKwBewUYYMB4I3vp0caM1ACHJW/a0eYrtluzPlDzS/9OsOxABW3bi2O33EP29\naMAP\r\n=+Fvc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUtQLWZ9+UCIfvHHKDRXmMp3OZ655kEfH/AWZ9/aV/XAIhANs1nvn6ltNUoxxkWA6Fj1cffQ/Zf/uj9HOSwF2v6vNW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.ee99b646.0_1610406488760_0.9238702093101487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.740ed33b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.740ed33b.0","@material/mwc-ripple":"0.21.0-canary.740ed33b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oJIq/V3WIXtbxPbaecUIVmR4yeMOCH8xllSOufDmeXfDvpqmJLbkv7IrMt8hxQJ/TTaA4wYkwNWLx7G0ovOCyg==","shasum":"e18236a3221e68ce25404235344995b82abd52fc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.740ed33b.0.tgz","fileCount":20,"unpackedSize":83339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSTCRA9TVsSAnZWagAAR3EP+weWCVah7hUHzLQF5pTe\nZzqtFjKSXbycd28tc6Uqo7sAKtObUaISRdsCs2hozq4MfcwwCBqfpPeOfvXO\n0VyH7DfQ/ywY0OiAghR0AY3Artw3vIqcfIaI58aVjeZY4OuprZedNzfNqCQu\nBcl8/sCb1w00neurRByG+NS+SKjQC0r/e8tni1fNlSEkqz9DcfokPwQBEa8k\n8U6wn9EZzZGwFvMJ/30Pm9Qeh3UwwdeejgjrEaHpK14pPYTSoOepvfg2DObV\n0inKZ7fIaP3aRz0ywwAsV+BVAToq8CeLDa7F+L8bU8pgsUSOzXkutw7DdCFz\n8DLhCpPMOixNWvAyKdKaFMECZBRm4AiHQkw4UhKFMwIdpmRmv4mPWAba1+cP\n+nxOt01Gm5zCKzY0PZ6jvLeXL7iFacs7dsAHVihmCGXt+kmdX5fyl9xNk6R5\n7jhLYvmHNG1gUfm2zYI+PXyUCrTMGu6sKWrPajGFXAazmNLNlCGRS/pwBzy0\nac7ST3QfXY9sU336fSjKuudKhX/47NbfMBasORqGCW13RhRylVybizDHbKXP\n5FHW1BYGJ6azo7opbRcr+6yN6c/7/CpzE+5EfXp0uHjhJMRe1Vz+26ccxzeM\nw+DoREouPW3A1y6Sa0lpxnaChnUb6ihENc4QEEEQXtyUCGolhNWGHFgWoJzT\nipxe\r\n=D6nI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxkXGpFokOm/9ykgnE05sOzl819GKb3ISqVBF8XOYG6AiEA2bn6svsIzxb7caRwKIPGUiAW0UQ5Kd9wTAg/PhMi6W8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.740ed33b.0_1610474642902_0.6892271918309134"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-button","version":"0.21.0-canary.c5c541b1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.c5c541b1.0","@material/mwc-ripple":"0.21.0-canary.c5c541b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/y0IhSyqtmQN+ct/LUvYW9eyREWADIjTSq7i1rW8ISI2Rb5dKnwkTRxcSBgX9JZcwj282CBrufxnsj2ESIs4wA==","shasum":"c3f868cf68672473dd2085f1506f0029008fb4c0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.c5c541b1.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5JCRA9TVsSAnZWagAADakP/0TVM5fMszlFc4Fq2L04\n2llywblClnRulXgwkxVLg/E8mOpSIEFA44KnYb+ElH4ARE7yH64NnZbPRc0F\ncIiK4nVK2DbfCHg96uQDa+vytqSkp630C4beZ3j7pQeBvJUD1q/2wSl3OJsT\ngD0Ilyq/RvfgHPp4qyz+iKDuv2/DvQ/RO7Ih5RffzjfYFKW4KaqNc21PRtMG\nk8DUxlj+KsZHtttVtNoHiaP6+HrCb+XDEHL1k5LZNdCjJk9q1fLgA0YEWydg\ngBS8Ba1jYotHWJ+Or2Wc4SUrJPRKhoC+PDh1nEbI56IXQZVoUvYdbUbetGtq\nSC5+jNW2KEBqRUVix+FJiaE0jkuZ+FEcYPURc5q4WzCfYhl+xmqX7jx/ePKd\nSAIGH5Pg7jFsbhihWDi3JW0riLkOAQBAv0005O4qqVeWd6LGfZs0GghgPAQc\np32/YN6/4+QMaBS48eHZY9KmgHOpSiYoqS1YEQ2+pDrUV/BgTr6wy85g3OGB\nC7n9GfWOvDKF5efV4jVOZAN2KaVy+A6wqR09PlFG2ncXlwwFHHH12agvr2AZ\neXLy7P3Px6cXzhNGpHsG5IZOdwO2bcFC/O+H6eOu6UaZhIzcPNpLY8ia5nQb\nVeikYokZOs+us4aLGNFQ88qKZQkYeMHp+zdksfIj1Z7ECuYmfH/qufNru+CO\nyvId\r\n=zz9e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnsyLBXfFxqLdhLIPEyWYXmFXEo4EgNATqrHaTIJXgxQIhAMVbYB5+NTjkO0UhsvrhXZnIgXNB5eZPfo7xyJJukQWL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.c5c541b1.0_1610477129031_0.18980644300615745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-button","version":"0.21.0-canary.06fe9d90.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.06fe9d90.0","@material/mwc-ripple":"0.21.0-canary.06fe9d90.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-Ul6gwWagCPxjwTgRdpnYMrn/e/88DuURWCdzqUk/7wtF/e+IZSB3vMXP7HTXo36Qaj3qB2IM43g30fYyy0q1tg==","shasum":"80608a2e422ac3025e88457242ceff8411a9d39f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.06fe9d90.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gygCRA9TVsSAnZWagAA8gsP/26NAA3Gr3aiUD+HOnEg\ntUlimgyo6/cepnNa5frPlCKa+9ZOavo8k/TV1MFxonxXk9NDTcJCHxaaeE3B\nKQKcr7EHW3YGoSx90tOCIIYUVbZYtY9xeWQIG0j628cerDJcUP7Z/QJdg//b\nmXUxlPbWbbB+IMHY1LsykrhFUjAIkYE8wdj52L8Sv9RptDU+dw3a/EiGRJFh\nMQDWIrhu0/XtAXY3huHpuKZrwyhwCSrcbMjX9lEfY9JXPnZYY4xjofhmKHmJ\nmxYEUcC64FUoqe3GIBL31zt4DBTB63uiWZ7vytXYgieG6lxAWrIEARa/wcLd\n2G1c6bYCbVa1cZPfmcfYsuteg71jZTJNCZuCzjcZ4mlglfv+3lDrs8tq7Hba\nEBX+pePxth1doRDFodQECbCO4t/LTN62taq15w+Tl73vjyNgjuDQ0vU6k0E3\nwFiXGcCdIju44vEGhXBwO9db99BYWuYZg29+VsgKd/WHkJHSRMcO0v9ZO/ao\nm+NHh7GF4Z7lUjAaWSkSvN3X4gM+2f9riIhvbGGONv1oFz71rcIRgJPFvffl\n4EC0q+ppX3Mp+DKtKVAD6D92utrZq0BB+R/xb1pe6rfpW0FVxmZToJC3x++b\nYjKlKF23SGVpkE34bagVPOXkwpY5CWBJtS7RAqA1VjRo7VljIP0nOooTh6b8\np7cn\r\n=Lsn6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHU8QZhS3psZdbyj5TWpDKXtc6bOMY1HCpk8WNTr3q1QAiACK3+trjaecFZVkRWjKz3fULKdC4e6b5uY6A1RicZnWg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.06fe9d90.0_1610484896178_0.11279755956569093"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-button","version":"0.21.0-canary.269eed01.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.269eed01.0","@material/mwc-ripple":"0.21.0-canary.269eed01.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fzebQuOsMG8hHW4FY2acHyy+vxlp2QdENVVkWg0BWASX/tuFqY33QuGvHVch9ou4ZoA8vVrUoVDK+uensGgJOw==","shasum":"ab1e662cad1f29821aa5288a9fd7c169669c80d9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.269eed01.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2noCRA9TVsSAnZWagAAoYYP/2aXORJv9MkSoOjZJWBD\nqMGi4q1ebQ3ahJssbIQUSl6+AIkTjQIO9GEkvnO5DDBZmHrVfgcanYSi3IHZ\ncPAlPP+BjUPMd5YzF9yIHND5JCLJRRHLiQH9DTpswR2F58+KdhCkuzfA+PMY\n3GJt9JqjWAhHtcpXZGCoamrIJtpHa1RPpkTmjGybfp3OhjMaeF3OpBpSXc9j\ngiv6RLra+n9PgrDTDkKgtrMEDZo1GVHw6JjbmNTGoJ5uajSmuAfRDGE7ro2w\nopQ6xryQUnjmzJl17CtdvtlSryRM8fv7tzWVjVU0WvMUb7FF1YApxlXvq0pA\nOrQgEtJGW65hymbYFTDI5B8O7f+fjQC2O89TGbCbynyKYye/mmZGc1EAsZZb\nGdVd+lMKtBcsOI0VaIS7TR12VWRNl9IYavZLuviUoL+U8JAix4G228o20zKq\n08cder7wpfjbe4v1aiogpnhLhbbFCI2PybgCaXE2V4COjgcsMqRFPVSmoxRG\njb3MfWOh6HPP1f/LU9UD2Z/NERui3OunT4lGOajVQ2x4McSNzAd0UkO4XAWg\nueKNEmJd5YUOkLyTc6UtyOCDRETD/1w87UFDC2l0sdIyAW1BdB+a/BvaxssY\nLtyEc0RnMzfAdtkxn8wFKw56hRBSm8GhhivU+bEztVG1L+hwei4UxFReSG46\n9G2O\r\n=8pWm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq/auXg3A+HH1Ail/95jprAy1xQRdu0byhRIK7UJoaEQIgKKZZYuZLCe963Fgr/PBOcam/g39kgrSQLlWXxz2Mkm4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.269eed01.0_1610574311957_0.44797774607812624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-button","version":"0.21.0-canary.8c075f35.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.8c075f35.0","@material/mwc-ripple":"0.21.0-canary.8c075f35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-q5d5Fsv5ItqwMIGI/hxB8HJ3lYHJ9IPCpjXbNURbEsSqiFZBNYJeJn4i5bwv0LUPM3t52Y7DvtZne1spm0d8Gw==","shasum":"41b4dd063acc5afdceb1134d708503165f07006d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.8c075f35.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30PCRA9TVsSAnZWagAADnkP/jVxzsgdwC7s6o7OMEaf\nmToVIr3+9Wz9cGi9DnyhtxgBYJv1kA81T82krdzGCElqhiFaftz6j2a8ZkdH\nsxtBOitOeXFWCxWJGjrlzVyHCyM/7gyRmszCGMswFnLt8/LDJYYGisKHOEK/\nT8Y6CWKlKx8lS7/emTqWqsz5P3Ey1FNbYajfFdOJCpcsxQyf80Cva/x4/fUD\nEnNHIqYPhcXNcLeWx+mxXdQZd9P6ohakozZmY+px4CEB0bqo+XAiTlaDV7nT\n2hYbb0Wrp16muzOAChKafkQxvanggM0GEcxcgRKKJ8az4B6V5O+EjyZhi06C\nigKYpS594i3SPRdzrqu/jYyBZNAw7t840zEhEqKrll+hzdtnp6OcIRAzX8ym\nc3ouZEAU7j8E7qkFMZ4B+L9HG0l1x4RjiJoQVzdSkXgNSB62m5B+CbQae3o8\nA5Pbmu9YcHvJPQtjl3fJbR/5Fs3RYdUcVvo26bwqG+01qV8X6cBNiJebctmo\n0kX7aomuZ8ww6bf8Z5kYRX+DBT54wjzBZUG2Qudk/8TygkuVhG5vmp0y3nK0\nbW4+1fCYTbGAFsOkLiB7KVgahKkxFqNtqWoq+gS+Qph+bOEc7izXRx1lIQUM\nnWsqWUL/OQYG4MG1NSu8bqzajIvlAnAeSp8GPQs5fUIdv4zXkYg+1p6YjBWe\nV8DB\r\n=UkPS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9r9nW08qVqFsmop2y3alrWmh4yGe+oAZxIpg9HfIrtQIhAJAVCxAE/zE9sUKQ/ypEkDzc04kzMl0W4sl1r8zphEId"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.8c075f35.0_1610579215014_0.4333529400299436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.3cda381b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.3cda381b.0","@material/mwc-ripple":"0.21.0-canary.3cda381b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.7584267ff.0","@material/elevation":"=10.0.0-canary.7584267ff.0","@material/ripple":"=10.0.0-canary.7584267ff.0","@material/shape":"=10.0.0-canary.7584267ff.0","@material/theme":"=10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-l93KJEzGvIxxiopx8WXDbxDWP/HHLwrb/SIZBHo4mYfXmwJngKp4VE2rlEqv32KsBnLFBm2gopSxxMldJ2leXA==","shasum":"9b7d9303ec3e59428d5e1afb5708b2172068281d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.3cda381b.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qOCRA9TVsSAnZWagAAb6UP/1pwgF68oGDTxsLfg40I\n8IzvmrXqcMHdZwEq3D7UrCeuRo+vOoTUXc49/sVLCa2LKfEymK4MOhPwacIN\nSiZX3sknP0S/EnDttnS5otgo7bhp+mKXqSBHWg13fENzUAJBm51s92GyTyZC\nKx3jBpvdTsSrj2LOjw/ppmXrJtL+V4hsoUbJ7GHyrDKgvd7KYQZBqym4Hs4v\nIRDqpHuXHZRXM567yYMoVV6TXZPQoBjzEKUYF2RXHZyjyQXHOPglYwG6Nk0E\nnb72zVm++wRcNlOdTY+G53QVbhNr3CVA1MjPuBpgcgCiZ+LtZjVCYMi7No3/\np2Y7OT/GjFOlNzfi4KvL/JSlND6hqVwwwvlZ0v5/ukHome6fA/MOkgwUOj3u\n/Jlb/r2hPDtl+56zh/NFc2pTOyZQRRV1FmtP27KefMYfMr6RiIoCvlGatCSI\nVrffsqmfjVYnuoJ1adWjA15/+9KlrRmRKjwFcsBLcyCRxqq0cmwU+D5H0tp0\nXmplceDsMpKVm4Oj7w5ARKTiT3EZxFz6Sd5l/jlOfTzbYfNr0hw8qGowOKrj\nycKStcKcoe15l+WbOJ2uzyvj2gBuWkqWv+rqS036xegVHzcMldfzWFLVvPdv\njoZnK+Vmt2PVRnoj8kZ0IClrGbp2sbyHGmvZpC9bkRq63y4JDIZ2AenZE0xT\nY0Z0\r\n=xLjk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHX8B6PVV//wmuXiSBB9n+HapJ94MU+BFSPgWmxhGIdcAiEA+UxsO2/6GO5b2RgP8MOcN4s66I7ALdkUSnTVuObOg2Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.3cda381b.0_1610582669824_0.440327083482265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-button","version":"0.21.0-canary.bc113605.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.bc113605.0","@material/mwc-ripple":"0.21.0-canary.bc113605.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.772cc1068.0","@material/elevation":"=10.0.0-canary.772cc1068.0","@material/ripple":"=10.0.0-canary.772cc1068.0","@material/shape":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kgL1K7QM7cqM1R8yguBmuzdxNZRxISCDDY58+rghhtRrdGldTQtQKRELLK+l2AZasmZ5MDTNz2FVk7PsGykESA==","shasum":"07b33ee6250512e52f7f73e61401d9e3b0d5f5ce","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.bc113605.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5QbCRA9TVsSAnZWagAAWKsP/icURictdz9IBGIkLmsG\npFpxH1NwjPhqBlb+VumNITp4Elh8pqcUqso6zx7EDs1za4BdDDGefLhYj+2b\nduhu70BN8yF3aazXaYopIo445WEWPlufPwblQpywno80HFFcOSxytbmtMliQ\n3I1Vi8vtxj0NYsQ0SsR61/6PV+vPzWEeB+31/0RoRt7EB4U8Og6Dgv3I+lYn\nhoG82evgNbIWgw+0u08hq9C/svE7hWuPrKSyz/Iu8n2l80i1xKyVrYDI+NXs\nn1XgR7ch0INek0MUy+RD52jA6/2TGvCihvEsjpf9gL2dSrSI+EuKTEk4LvNr\nuKg+1HQrZsctEWmQzOAqB5ZhZcfRdu+pT/GFiRGr8Knx9aIDA6pVVpYVHtEZ\n4BJ9ynJMbxlKs7tIjv0zdMkVvQD/Kn8M7f8gMCGaodsIMGHXIUCg2QBEwWme\nKxKM9bzSDQAEqiWgWTmezpFhVSiisf9Da3MhqdUge51HEuDcbKyRZCTXMQw+\n6qpRDeBonWekFTeiCrNIa/uH6mRAFet/ZxjI0Gn+Je9odox369fR59rC0KJJ\n/XX0Qzt4Yf2dfjwb6WF2AOk6UmYdjYqPlQJmF9dMv0ujxzYYTUe7gkxvu18T\nW8yNLprp+h5LXFB1R0dIAhEfsbNQumHzb/mm4/k5eNasS2RGy6sQhGKjy37B\nnvxp\r\n=tDTW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEz7qwmqfl4ZIf0yAqeTVBc/ZKkWRZkpduirY1VDupoRAiArxbIoozRBOU4frGMP03makMS04WmrAJrEcgMEuuo7+g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.bc113605.0_1610585114765_0.6429779125513029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0c1d6ff9.0","@material/mwc-ripple":"0.21.0-canary.0c1d6ff9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.772cc1068.0","@material/elevation":"=10.0.0-canary.772cc1068.0","@material/ripple":"=10.0.0-canary.772cc1068.0","@material/shape":"=10.0.0-canary.772cc1068.0","@material/theme":"=10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-az29tQ2mLQOOFVw3h0AuAweuO7XGk8PmZGHAeHGusT9HvNoi6r623WSSOqgTn0a68DLsa4ddPgR8y5CvY7DUmA==","shasum":"8da3c570123f033bdbc75817030826104d229771","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfZqCRA9TVsSAnZWagAAbnYP+weWvHnJXFTxqB0kwyNR\nNwiOJaz+JplX5G7ObayzFuoOmbA/IwytiL4oY1rFw8SzVshllI1ckYIE4Qy1\nudEin9RZDKSpIysxreRvZG3bjMPITEe0sLZiljMCjJrlV5PBPIFbriKxs7gR\nyWcpxomDhKHeaPHxm3lbTQArER5ZS+70f8eTjBXqvDZT3d99B4AyBt0rMQPK\neYEQIju/jPVzpijJmhnPvyc1L0eypGZgmMQlHUGnf/BhJ2FyiTm5dqPZ3tEt\n8QRnY/K0TvTaOuT0CoB33gveLbmgGR5TXVJbI0kDTzFA5D7gVp9P6ry1Aglw\nX1dTlr7QuVGfMa04NE00vxfPUDA1nTAdg6MRdhR7x0sgV80VZLkbEinkfVea\nliBa1tiiU7L/cxulXNZs0XTc9z5RWu1B09fNy3PkQK1WMiMxmpQgGhM8Amf8\nvPV2Nafvy9VCmwmxbDx0ds16Aj+ncr8Ckd2RJvxZ4dvmfVkho89XnQgX26Cv\nwJqFmY8GwNKVbQGWYt04iYMYMcyYmahpOEaSOum1+JBOF54QeOhr4abNmLfr\nF6vceAEe1nXZQQzLKI+hTTn9Xek+Ir+bOOHfqXzSUYBionwHBQsTKlS8rohy\nuNK8RICePMkHBjpOmpkjdsbvXc/ZmLNIWvdK2OD0KxTK41Oqp/FoIdWNdrum\naL6Q\r\n=BfEd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR0jFAXf3SaD+UEoyUXLbhW4u1S7MargRaPo/Fp4dRMQIhAI1TTDVSCjbDHtX2HdsZt8D9Zr/5XTNAFY02Hd6/xkdE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0c1d6ff9.0_1610741354490_0.7998741219339902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b4332e00.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b4332e00.0","@material/mwc-ripple":"0.21.0-canary.b4332e00.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-s+8WjVr3T1SXr6XkF7SbSswxVVZhyVysZJwlPmtWn6oEfgKcs4l0KvJlES51/UixAvEU4wZ2+hEMYFkgEr/NYg==","shasum":"dcfa114d89a978e0c010076fd149c18800c94d0f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b4332e00.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIdCRA9TVsSAnZWagAAXjUQAKD3Y9chZtp2Vrwh1zYG\n3ww70VlHZX7tvAOeT6Rm62BmBba+6mBhwNy/1/CaVdEVC+pngpU63fgmSE51\nXciXrD9kvjqz0TYgoO6pW8dO7DfWkr3zsQY4Xfml/r41L6Vy5hRpvGULYZR4\nSK0w9XYiommNgWasYD68kocBoMDDrFPa/SaxpeR7T5hol+mmv4NqzKS8x/xG\nKV123clwpeH0CblNe0aWpbWk4VQc8Ob/rOvjO3gWeCJsjDsiRZu59XePXz7b\ndYck5OdfabZC2MHOBOAeH7hnQ7fZm40gCYmDp4BozPNZ9K2gW6KsmIUCY5In\nFgVocjpAuu7ZhuTNuD0ehPTxok2hzFs3itpiGMhWP/EAT0OiE9hDZK3nUXM/\nd9Rt4+MRtGbK6RLlHz8iaZfguAW06sN8MLIo40uk8EKjQRD/A93t752QGAs3\nHEVz0i4rABit8RzuLq/Fd+lYrNfqfbYkg0mSv3NMmyMlSmIo9FuH+l+ZgS97\nujigw/L7/Y6yemx5SW0jlVfKJjPmeEn7lQzTRijdJI3ge6E8+pLuqxPhS1LJ\ny8+8iTfvos3SJhWUKNIZKx7r8sRtnsl6e5r3anBtSJKRfMd6QqZQuFpQ1J5n\nDnOqAb8FqL9YruGJvb8ppos/Dy5Ypf+ZknWsVZ6iMmycRm1tCwjSfEFUSEBU\nW6Jp\r\n=pYLg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDV9NJ6cvICVDl6vLYmyddJylUIhatakraMsmG/Pi43EAiEAkpF6PueXP51BUvVgAjDYOV5Ey2oDLDSOT/KnWgNKHDw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b4332e00.0_1610748445297_0.6363404699197284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-button","version":"0.21.0-canary.2899691d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.2899691d.0","@material/mwc-ripple":"0.21.0-canary.2899691d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-vaNxfuHHV5xb8VXYqRY0TFRTJetc7Q8pkSOWf0GUuuN3OoJ7i5vggvBItU3txnN7wX/mNh2rxXsVJ0M7tgybzA==","shasum":"08a8366300024c9363d5fe26bbeeb2eff16356ae","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.2899691d.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkT9CRA9TVsSAnZWagAAIa0P/iVh1JEwh+50bRCJKyrb\nJhdg8NoCkOygxEohvShS4yUFmd/fvpW38BWXphdnb46xcM12LFaL0IXrfchn\nMtD7I0er5SfwIlJpp6ZysI1eJJ2tsJBtrOMjtSWhaF5BULnXdoX/oZEreSD0\nB0lsTWU5mre5ZZTqnT3Hogqr6i32oF4E8e1EBk4iJjZz3fK/6RUENgfU3bzd\njajEVVQsxWE9HsWR2xB3JypHgEXBrZsntaT6g7C18qSsVDsmMuudYcbi80Mb\ndDjKh+cd/b/FXLjAXgsGCYa24qDAEV3UBDCi3N08oUZYTbVGMGdbJnQ0Zqqt\na6w7eg0cYkMBji27RKnWBml65SI3uI1XpJjI4/FSzIssEiAtkj0P1tdLize7\ntHAzTXAkqmp0VgpqADDiXL3z3Q2A64Bm+udU/0GeOVJsgRVlWwEn+txcbU4b\noZlDzgPD+CJCB2/dvR9lWJX2edw6QDyolc9Js6JuoZkvW7Yy6UESLdZzd4Ns\nIWZDZTZHHfdZLGh0C5iPKAPKEbbYMYpa86fG6uTD3GGn52o3il+RJuosv2L/\nWIJLdNhemkGVMHzyidO6wjDCqmvrE65ofUiGrU1vg/stRDda3OLJMyRH2Xvz\nhh9R22nHtPZZqlmzrXOGsuynzceuKYIEMJpHnsc0zIAnNumEUMldtAfo+H6I\ngqRS\r\n=HvsM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQhOE4pRrluvwP6h4ZFJdIYPwv4P1wmIPxF52uIs+P3AiEA0bk+G5ewTxsYLo5xc4EJ5YSy2CwzPkrO0LhtZ/KRSiQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.2899691d.0_1610761469305_0.8529965205925383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.fe73953b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.fe73953b.0","@material/mwc-ripple":"0.21.0-canary.fe73953b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-s599cEPn8JxTjK2yWNCETvtb+Q0wCYm+fw9cfXrXDM5gD+l+6xBs2SG2kmDTEqhlFvTq4+uinFeguioq0qs78w==","shasum":"3908b445ca97c3a5aca367034663c1636c5d0fcf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.fe73953b.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzEwCRA9TVsSAnZWagAAmRoP/jts4tJpRu8uDucoi+wu\najadjc+GAMaxcg08SwmyA1zOlELa8+Hdp1JmBUboPe2VcoKVO8udOkaFwuWd\n+RT41cW8NveYAzBjE2g8spraX+dI25YCHyzwFyTW64mJIU6Xv9j59AXyz10b\n4eEadnJv7uHfGhz0uwoN7j3gIP3IRhZ8OlqW0W9I1BiND/rKAVezvKD7x0EL\n7G9Molzh20Ki3H4bcXZ+eeraDJY1ELw6cd69rRlMIlw9KQ24muiobPT6MtDL\nMMQR/pWTYAKqunuWeqgrLxilWjZ3BU0ZqlSgAxTrNH9+ZNKz5idEHy1lGhxr\nal0tPNol+hdcgfcYyCnLsgNSFWXPPqLIKPpm7JHJxMSBB8F2lAP/5sRfLd/7\n+cw5BK2sywqeELSdzyzQ5jrFTUi9mHljPcpK8Ma8s1ntcjXwqcblNyGzSJG4\nsBSRQGRIuS1uFVi+ZZGaJ0Ym8SGXDfgjKTH8WjwjczFFa/WzwwoVzYvL5NII\nBkjy1UGNMGtEuHznz9L7eg7Z8/kDtmEfOvLtzaEYpPch0k2owNPNOwk2Czpm\nUEm++2WGeM55w+RzCIXx9ApLhm8u/vDqMNHafrKw2VEGlQFg5fKsrqheVKU/\nEMtfGzMoQtT9GpAkHcDjQrs1Aqyokx0jDC46l4HGwVZDsBtkHuvXVlaKNE/3\nW7GY\r\n=JbhJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYG2Txdt4wj60np3HsD/XbfVmjwcClqYg1pYQSPSOYhAiAs0GILVei2ddH7ur0sgdnxF8jzTqul1CGZWUb9Hn5bqw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.fe73953b.0_1611084079723_0.9784691736116367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-button","version":"0.21.0-canary.d3a16455.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.d3a16455.0","@material/mwc-ripple":"0.21.0-canary.d3a16455.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.c7c5da28f.0","@material/elevation":"=10.0.0-canary.c7c5da28f.0","@material/ripple":"=10.0.0-canary.c7c5da28f.0","@material/shape":"=10.0.0-canary.c7c5da28f.0","@material/theme":"=10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-VOlxKT1b2sLnlh4TZ7CMHrUMPIbq5Q6zFqWZs4ALPWlLge7aFx43QUPy3B70mxjmp1i5G3jYkesDL9kYFW+B1A==","shasum":"3da3cbf2246b60026ed8039b2580207fdfeed212","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.d3a16455.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzhvCRA9TVsSAnZWagAA8nIP/0iU1plTWcUotvuPRJEm\nZI3xdOdvNGhPLqQyOEzs3t/kWvl84H8Nim74m+xfyhO8nvsEkwJZN837GoIq\nUpC+oR59/ocb9F2CIIbTJ2uGCx6DnKQSTTDDZ7A2QU6o2itBtvH0ebRzc9zr\nllg9ye6c4WESxl34VQvraGNbi+3n2VhbstwqM2v+RLg/ndn98pmo/TCgD7x6\nrKIRjjcezAaQf4LXjw+onyskDgpSBvsN1dlfpab8V8X2JPAiCYV88XUokTWC\nZrGiBpp2vOfhearfapIfrJlCj05aDKiD+bVFN4q1T5YpwLopCO+21j94ooOv\nqT796IZLONuW6X6cwvwyReDrNdLH/gURdhIXVxFxmWjTPX+CEwgXrHvtCtP6\nqX++icCGeg24RSVhh2pZIX1z9nT3EiAKRE1nLfAXJNY3Yl1v4DwWRSneSOPM\nOhdy0C4F11nNfJjG9lxuSEiKS/fqaR3UkzDPR8BK9ENdSaM7StidAqbjIDwQ\nTcnnUCd8ioHkd+N5cG1F7N21C4qF/YkdF8fPDIu0uOQ7eSL3gMR3pUW18w0s\nXnWX3qiNArBh7ve5TxWCRfq6JaC41OaqZdsQJ5qVBrKJehIFCEEvAVuxMDgm\n5cMf+QHeS4rzqLhLWmu0DAo0uVccsRzUmccbKnEr+GwY4Ne55M+EULOVveyh\nj+TS\r\n=REGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNDzGApVDbKV9yrX+KKqa7EaE1itQ0XjXXw/jdeuVmUQIhAKw924ftc8XUbZNctOWlLDIQhN8sgTrYpShu2LRXCTb5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.d3a16455.0_1611085935503_0.055927211214818584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-button","version":"0.21.0-canary.597ca1b6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.597ca1b6.0","@material/mwc-ripple":"0.21.0-canary.597ca1b6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b2faa116a.0","@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","@material/shape":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-GW1PTI8lvJjTeKVlTkWzCZjwCXeE54Ag/MyxcudjZCUMp/UVnI5Dv/nCAc4zu8TnlXzlzLMHq4mJ3hjSxk4ttQ==","shasum":"c330829164125a1ca7c9fb5fb598a4da2d5f0d57","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.597ca1b6.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4CECRA9TVsSAnZWagAAxYYP/06DdzmjIavEMYwnByjg\nOB2C+7bF2p5dnQSSLsCNSlpKVkMStvjR1UvPrZcqNIkQnAYyXk0yL3GzOfHW\n0mNp0raZHJ4PDoIuMxznTdPeqRTVhjXe2f+pT4CrKQ0yiDqtuKOZEKnH6et8\nDZ7nZBoYcvQwWGS6WBTKkhjuiX/st7XqublZAO3lfzZgQZgGFI7OvLYQ4KBH\nm18mmG33irtDgDunUS6XttDGRUbpFyr4M1OjRzI1MIh4WQoYTsLEdfdqq6MU\nli84VAh/8eSOfaKB/CYbMwvdkel7isKwJOexpmMcM8PYm6vJxC6pD94sRkoL\np8kM7ndw6gMsCdGpjgovKF+NgA6KthHOxgTJTC8cCdSkmNV8Bn7KfHXsBu3u\nhuH5535X4S/EVInX9zSQqbQP9SWIdRaDL8Y2Xt1xuFVJpOcOiXpi34jv+ahT\n56Qn0eFaAhQ/FRRpf7csnFB9qIjMwib1UynLfWXQi8rm4goMgMDIh5EU28zR\nckNVr9Finvs86YpYRlZ8K4JXr6K9fNY1QC8ujETrv6F1m73pqLSTkRmhJpx6\nsft3ksDrBrjGUZUg7Mvjkyql2Uq1J6qGaS5A7wv9XWEy0YS5mT0p+z+KMnVI\nxe+Urck8hRywL8mEHl8sTu7Ndkd2mW2RQjhSelc9kPx2QQ1d6aZ4da9goQh+\nTJ/D\r\n=0QLb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHhs00NA1FEsNG1RkxhQ4iU8RczJgbgiQoiuogAHPFJNAiEAs8D+tMPY9nQy39EiZyh4iByAslPDbnp16mG5NZKhPA8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.597ca1b6.0_1611104387792_0.3079621973150546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-button","version":"0.21.0-canary.3c195efe.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.3c195efe.0","@material/mwc-ripple":"0.21.0-canary.3c195efe.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b2faa116a.0","@material/elevation":"=10.0.0-canary.b2faa116a.0","@material/ripple":"=10.0.0-canary.b2faa116a.0","@material/shape":"=10.0.0-canary.b2faa116a.0","@material/theme":"=10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Ki44sjSXaAz31cB3jVP23u5TiPw3eqtUlueSxgvQeQEMetQDd5tKjCBcFyqAGmRBfTlYBkycNhAUXm4x/82ocg==","shasum":"64e6822b3b7843dfc82b37cb463e6652766c3a6b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.3c195efe.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB47zCRA9TVsSAnZWagAA1aAP/3HFy3wONuZFMe4OTg4H\nBG7W5+B4D/sd9o9n4sngKTC4svLBJ9UVcHlIDjjZvUounP8znPMa+Z8K25oM\nFuhl5yNmP8Rrkug7rrCo8ZeqHqSW48PrtHs0TsYbbpATDFEZASw13VLXBmZk\nzIrJZHGfyvuWj03cPgb6iL02+I2/jTfvJ1Z5iWZ9XuW3BhBwAVKpS6/zdtEW\ncIyeZ27Ls0+rQy8E9G1BXhyizmt+8bX4LULjqHoMoUTx74aYUskGWj8PWwEy\njoihEJTIwbpyoIrq8eCHOeitxEMZWNRXMDp03pu1tX1ZmFedVN6xhMGM5cjO\nTd9fU0uMXuU5zWS/+JOvSkmL6ikz4bG4+EIwjfMVKLuru7AL59Bc5YJZbaWC\ndK2orakOUPdBrlleEFrXMdL5pHgDnZdIUOs9e/mvM7+GBofOQZBb7JVBTJAY\nzbdC3O2QPkor9GvlyBBUlZvcuQhZclnvW41sv6Eg5qLim0hNRj4ipUdpPXUc\nrtaQvT7j3IBbT2KGr3Lk3AWiv9NseH5tywf1K5OSVHMPzyW1Yk62E9REfd1m\nC+sYVe8XS+M2tsh4LYMyxD1l98YAAN10YD/Iod3/eHVhNgB96Tkz5byuwqv3\nde1OsXJVG3+UrBIqvMrzIUKT8vi9KSbN/khObE/J5LhJvAHkKAduTx185Z3X\nA26w\r\n=AHmW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvuT7eG+0r19KBcBX/gGYnWaeBpcsxXB1D6ptTelIuLAiEAhCvf2vC7vjrzl/6CGDiuGbX3unLbS6ZMRtDnoisSx88="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.3c195efe.0_1611108083039_0.3165681791625474"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-button","version":"0.21.0-canary.f7b8755f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.f7b8755f.0","@material/mwc-ripple":"0.21.0-canary.f7b8755f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.0c95c9f7b.0","@material/elevation":"=10.0.0-canary.0c95c9f7b.0","@material/ripple":"=10.0.0-canary.0c95c9f7b.0","@material/shape":"=10.0.0-canary.0c95c9f7b.0","@material/theme":"=10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-l2KT1pQ3dcC5+XF9w8d/5O246R+c4tp9oTrkLvtrkcpvcO8aGVKXX0IuDAztxP5RpbfUDuenhsrRAFBArtFPFQ==","shasum":"4c095757f11a0353f3cdb6cdcac30b88b35c7d9d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.f7b8755f.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSRCRA9TVsSAnZWagAAXsQQAIkT9zef274arDCrxM5f\nMN3uqyp+Z5LTjsdHUeznO4AY0qNPTtq946ENEV9KcZFyebugwwkX2uHpWzD2\ngNesvAc5o55HZtf8FWGc0C6gbcPF96XiHS930aISA4jupKW+xrTaXmvQzx4A\nMcr2NljA4Wbq37pwqBa/nRSdsUYDjcv7bNGgefWMKXBuLO8f+vU5KUJyzfwy\nVkgvTGSNBgZJvZfx/JTCFcXxFx+4m2WDVNwzDEzrnKX1awUu9SSgrK+LzVMM\nG/M4uJDxtg/PhlpANDyXXO1TbV+gIE+jzLBCiP9V/IEDZijdptkJ3Anh+eDx\nZkJyc9YLIlyU8Abkbt0llMVoAosZfwILY7cDM27NgcqGb4ard5ZQl8x0d9UO\n/G479ambRzyYsSZi9vW7x88YiN1NIES8Fu9zc0/B66SWbUQ7vbsLEDpfiBXv\nu+AocB3hOOXs0APVAGkWROobE5vCmF2SuKbnDKA/TpcaJo9AaPzyX5caNahX\nfLeNGQaLxGcJliYPBR/stnPntFVIvSMZD5TYobQh1wnyjkVCXOB1DbjisOpY\nWPrj4/hcVSPCNw41dif6IBkmISmdLYV/puXEPsB8fOsIRca+EUo3UC6O/gls\nJJSRAAlkh0mJb7CSrkIJS918+lJ+MWHT5qnIgOS6RuwomfNspXisAKc4NqbD\nUcvf\r\n=GPNx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSAjTOMIEacs2QYZZmY/C08HJGJ982EPu8us039kQbgwIgPA3b1B1YaZeKfH00MnyfrXXgTbgyRSo7cnqsaNY0Q7Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.f7b8755f.0_1611175057222_0.7314682296102271"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-button","version":"0.21.0-canary.f60de7df.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.f60de7df.0","@material/mwc-ripple":"0.21.0-canary.f60de7df.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.2ed2d829b.0","@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","@material/shape":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1ePqzdHcqRlTwHZ4soT9Qc+5mXqvX5VStjnv1/CZfaKOEDX1lFJ3HHokU36H98zGC4IoZueEDl0QMmBjIj17Jw==","shasum":"a5bac743b0216c9bd44085d6ec57418c3c9f63d7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.f60de7df.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6FCRA9TVsSAnZWagAAk9EP/1yyf8hu1SZmbcg6D62T\n9wgPuGgGaG4BWoq2gKN5MVxrdMAZ2lwq8XUSfswX8DKqys+0H1jOKSS4l5Aa\nFPx3VGMIQ/+UQngfIK6Ts4BazRBUg8Ab4DLWI91dG/tFJneYDP6/V4TF1wyU\nsv2OPcrahcwKElM5nQyj3UonPZWI+BCOt24VwlgecU+OaVag3ixDY1dlq6ld\ndfhPMSZW2bJY/K2c4dZ7U6G4a/czWcLxcSIcT7/CjKBl0eT0AAdMufQW8yA8\nBMuAjiqyGCS2zQRDPEf5L8HmbqW5+5892iozSBB6GIxVdWgqr5bva56gG0CN\nbeuWTZbTJ1w+E0YfUTCy5MtlMOairY5TqjJHV3MfH0cUpb8q10ZKvRubd2Iu\nIPcjDyOBx/z/YmiDkjGghFCV1ypy4HVwwS4TxEtU7tvQTgDPpPtdrNr6Jb4D\n1XR8rHpnm32iw1iiAGr6gt6Y9wJK+0ElNZFwuRON8I4yFPsO75qRLfIwHJJ5\n8O9y9b6RfmjHU97OzSDhkIbLGJnO93cjzhJZwRs7277h1lZ4dL3QXoFyq2Ot\n7HMIOysuIHP8Wxz/P8IRkoLgNh1ZDTToguOT1Fipt92+b7UalAC8wexo+tU0\nWL8UU+pdWDqhEWKHU7u1lnspBipomn38m/r9P8VYL06bLAYqj+oyxJYHYjqy\nLLsP\r\n=StU+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBPQquepm1KAXTt+T0vWwDBdpT30hxqQyccnovXe6ZrNAiB/v0NvqI/INKjOSlNuKlzVf9K+7Bb5/Y8tKzJAwbVreQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.f60de7df.0_1611185797062_0.6190573065212441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-button","version":"0.21.0-canary.664a2927.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.664a2927.0","@material/mwc-ripple":"0.21.0-canary.664a2927.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.2ed2d829b.0","@material/elevation":"=10.0.0-canary.2ed2d829b.0","@material/ripple":"=10.0.0-canary.2ed2d829b.0","@material/shape":"=10.0.0-canary.2ed2d829b.0","@material/theme":"=10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qHFN4u0WoHTh69iMdziEziKFGvkMNlFZlMj0kSwjlKVx34+nraCiknpdvz7PiPFQ2BssI0SZFs9rhvhNCEwkHA==","shasum":"281d46b50bd43ce3b4ce15610571fc7d2a40c975","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.664a2927.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOHCRA9TVsSAnZWagAAxNUP/iuQOqZ13YmPZaOa/hp0\nmetgKBi/leloNBEYcoLqCEBoOlNJsINWHOpIpLpm5H34lZBeCNLDSDUDrEtL\n5CgFWXinK8RAj1kG8CVwCMEGXamBTFKY5qjerlsKPB3X7rHoY9Djx0sYLM0r\n+zdJTjr8QNERZtyGYRV0hwMqo6lvKcd/rXRsxX+0plyLtxIGdkQgLBiBKJnP\nZqh+BjSnI6d83uXJhuk2vBHXAMGAA4FfIHQU7fDbdSpqqBYnQmcwRsyUZVie\nIATjOKxinKMyu09enXricwyeygkuYW0k9AbTKCPF0YkP3P+jYybOtwAgNUIk\n3HitnQJzj92dqkpA+4RMo6B1hKchzYsLBvlYY8+16NcBGraErD4S8Mnh5bUO\nMgsd/pjzZqFp7ccnevIgV65LzaNjoEHdPiC+hLG9NZfrqG+ElHtJxuxX3H1j\nBVe+S9Ethcaroy/KfRxLhdgR/8Ee/DLfTOdIibCrCpfOezvMdwewwzrkyL8s\nGKjua5icC5mDKzjr0buWkMGnaWauqPXi0L8VYIO0BE/9af7QWQ19/tg9QCMP\nRCgFe2aU+xuLGx1qyuUytcHo/AzhPJiCLSq0ZeinE7pzRlGTne1PxbqRBQmc\ny6lTinB5FciuFjZ3PkUOjYJNmReVX+lLes1lu5QBILQHn3b5vtAnPZz5BVy3\ny/V5\r\n=QBbV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG7lzLshdr1Z1T/AlH5z2rgw+Zgz1pNpL1kd5cKAbSbIAiA46eA7Ex8ibutXzosmMmrV0WXPloy1SJNE9ROPQL36WQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.664a2927.0_1611256711548_0.5471456530589973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-button","version":"0.21.0-canary.a6d312e5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.a6d312e5.0","@material/mwc-ripple":"0.21.0-canary.a6d312e5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.fd61b0476.0","@material/elevation":"=10.0.0-canary.fd61b0476.0","@material/ripple":"=10.0.0-canary.fd61b0476.0","@material/shape":"=10.0.0-canary.fd61b0476.0","@material/theme":"=10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-R3oif6jsgAnXImGzQ3x+T0Y+Hx31KMjuhgeUgr3hXThP5XgsbSpBA6CsucVPgNWyGTXFi/iSY4qBYcgNDQZ17Q==","shasum":"aafd8680eb92541a224ae573068107b3436d186e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.a6d312e5.0.tgz","fileCount":20,"unpackedSize":83331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfZxCRA9TVsSAnZWagAAS5kQAIPV+XJ/OUSsKojJjoUa\nY4c4VivecgZtTWYrK5d2Qp1KfKWo4EHWU7NDhn9xfUUX8JrneH4Z9tOlBaRp\nIoENGBBdWC3jMxHMs4mva5R0AzqhqOkCrGjzN++NKMShHHyZ1S/CJzUv4zXE\n3ElNWflcLPPDvWbqxPp3UtqZyqIfHcrH+UcRT+Saq7xiC4talfVyA4fsmBdU\nC09hv11l14WkN4ukdOa0S+3NmMKcQ+5E1l686suZZKpUEJHzsarwPZ/Njbkw\nJZpbRjZNrLq0PJoAIVq6gtE9pr01e/LrTtUvwOLQ3jHAtyzkonKgEo74Wdqf\nrXBZVfweBtDfZWz8nufSgNscio1Lmasf3gUiisvCFemvpmt9mKVZjVc80iM5\nEOkUFyg7jQLimpo+oAJfA2TWu+oakgYDyTfESU0mtkDTWyT2+5scvcsdMJmI\nIfGAD6kjia+UwSN8a0FpgQf5pKGt6tJYnC/ewo8t275s4MkTZSkITQiABV8Q\nNe+Gm6QMHIBq6BB3ACqKcXXSNcwR8ZfR4GKVnD6JkamosEslbIAjAEChLFlA\nxL2HhGgQqmhRB5Cx128UDMB/e5y3jdNL1kb1bEqd8El/4f7iFxNtnYiByrFE\nvkKv3swXn/O5Nc8pRdNRtXl6Rmh6yf9XasSfiA+5+fK+I9e6S8vtwkJSUj4Z\nrDlX\r\n=pfNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYw6fsOiWPhMU20mbkc94W9noJMy0WbSPte70c4uc4MwIhANTwzz1Zwh71Pe+wDhvCuC2+7CKnAsV0aPnpoY60fPY6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.a6d312e5.0_1611265649555_0.4574916528208941"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-button","version":"0.21.0-canary.027365eb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.027365eb.0","@material/mwc-ripple":"0.21.0-canary.027365eb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KehqzpADNXmzYCaytWeXgclivDNWG1zvAFTfDk9gTDPAsD+5AnXLyIwSLxD4zRRLeQ0UPtsNaNVC8LqK/kODpQ==","shasum":"8def6f55066da09550a610810f89c66c288c7ef0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.027365eb.0.tgz","fileCount":20,"unpackedSize":83399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6OCRA9TVsSAnZWagAAPgIP/AsF1uBTcfJiq91ZA6Er\nvws0n55GH7Y5+qPBmGbzUBk3ER94rWMHLjpsdjDTxBZt+FTS/EKCCkYuAqLK\nVOw8XunRvArifuFoZMgwrUQWJmXCs99dR3lxZNnYNH+Qn1ZaL4cqzLDw3Erp\nBbK/PqzsVHrJfB3AaDWcgXLSDVz2WvwXy2FB7fH9ELkPlbFmdHj3P/+40zkX\nfj/oSL4en94NeNTNKkdJ21ZoL6GhlRmNYRqhgMMm+sn1LZGK6xBE+1TAq1yt\np4fG6P9idkKUvo7tvuAKIXqPgyYR4qz9FNz/6aIa+2vrEEXxLtKH22H8r/w3\nKK5EqswPnXytbjkanNwnDSv2mNyFitJi0qYEz7RBz1L0hFPcmVB++SyQ3K5U\n/+L6+L6xM2A5hdcvfoQifiZIqbju1EaQ4TRhXZrzMQkYenkIBCLF5qyu3tSv\nu4smVvXSW2BoZ9n/ulbcrGCdrNLf/i6R9opI0NfsASyqmdpgL0cyd8zihgpe\nslP6umGTIwTRIlffDeAiPSds+8K0T3d0cftyWFxoywIB2cTFN0xgs4F7mwBk\nfNc9okilV/kzibnjwJ1o1ALfkBHUkJr92p0wWMeybC5dUsGV5JMAw9mDba3t\nc1/lpJKGIkMMukNIRQfAmYNNJ1hfWtfPIChk8ymkZhXoWw1rrzcJL95rvEwQ\n8owo\r\n=Dl5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLqV6+Q07/txlcwCoK/Jvx02R8X9iH0JqZ8VcrOuwsTgIhAK9kthPJbcZqr6FAP+bPtAwpW0y2v2buo0v2zSuyuKHb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.027365eb.0_1611349646212_0.25551789860147345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-button","version":"0.21.0-canary.7e72b66d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.7e72b66d.0","@material/mwc-ripple":"0.21.0-canary.7e72b66d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7stYzfmAN5/EwgY6i/Qjw/w45mxVi2i1d7elDiPqXXtGHHego6F8y/yFlFTtVkqKvN3OF3M+LP3aMMMQeGUaTA==","shasum":"ab864c17f76da7ba8b2405ce9a34aacf6f4e3a68","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.7e72b66d.0.tgz","fileCount":20,"unpackedSize":83399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC18jCRA9TVsSAnZWagAAPD8P/ROvZbZcZHw6u5naNHOH\ng3/e6RatgZ1y7K7YihYwncU/AZL/212XFXe0OPP/qSsMtASIF3vgaIOfaBQe\nWy/Hky9DDb07FsLXDEvRNk7pGNbZZJcsCqDEMqbb0h5thy7jaHZqRo28hk4j\nfnxPgsnU67GyjPuwoT1F7Z9NDig6r2/uTb0LoCG9GR4F/LvzbjaHrk3NN5vQ\nZqMz/sdDKXC0WLdvLeYnaTgSlw37xoPTBHLaB25VsW0TYl6K9JOLNwYbp2ni\nYTEZKZRyhLIBkZVjHI8oIWNurTCTTjC/lXWbQFXgSkSgvaOxRqEnv4O9wk8N\nP1M7jOLzQ/wa1aTXLgqlmeMJYOTWDrkCRgFa2qqzHg/Z4KCSpUTLUojRpnfF\nkuZTx3d0FILdXUFo/CYSMH5gcq96aE1S3XL0uTLE1IXkxRvnUv0QFHd9iZcg\nBakkWIxKMSqESddUFdMpR6Yslf4YbYzKwyxuy0CQ+sJr7fQJ1TureTE+ekJX\nX1qQvc6WKm2pv+IBj0T2b2DjnklDPsM2YWfAJMf4w6GNzb8Sd2fol3sadv0b\nTBYibngxvJxZwgZZJedTNvDNEsLjpgi08ZHGzxIn3yGLeke+hgjCjPjRd+Qo\nMWrBpyMmKiMu8uwuwnGQuTzvtWBlFOxEurbmxy/0tLhzZmmQ0FrepERvZC8E\nAeNf\r\n=8LsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID4vh7pnrj0Wz/A2ujAJdJ/yUnEs8MKDDpbAagCfo3SBAiArAXDwolUNDlI9lQYk6mb9xAZvD3z5jYYT91CRFkUV6w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.7e72b66d.0_1611357987531_0.8597519292779119"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-button","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.a6d6a1e7.0","@material/mwc-ripple":"0.21.0-canary.a6d6a1e7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-YtJY5L7gJYeNXh2xsd7obcpi5WfZiqO/psusxfX98CcasL5n+LpYlm1OTnEkRwLZkbRLuP8wmwvs/3RdbaQeCw==","shasum":"58d328a12d7f0da508a0f9dc6c4bc248b66f15aa","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":20,"unpackedSize":83399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CeCRA9TVsSAnZWagAApK8P/3UcKmMeoseDsCxD8m7V\nmnjQI8mRq14dqYHs/6eFWw8iVEv28V6HF3HwDyy+vjGbXK2yVShqyIDi0+o0\nUxr9+iTiOnPqbVeUMPvGLqra1wYpYhK+VUA3QbrCx8NcS89ypSfPSvKqrbva\nTyMzvCP4050+GAPLamdx1I69hYTFNEmzPT/sFIBDtAqwuWz3cYwiA02Vc46x\nLFerYIY4bdYY0QRWsjQ5COta6unbOkHyfAdX7JNB/PbXJxKb73hmxvxvONqf\n2LyzeLB8FZ6AEVL2IjFnGKOi5w9W+eNBF0iN1Xreetth1eSuuT7YGfmWadVu\ndfsX2eIYOuX6fLug836uRYjHRjgpAHTip8PONBBfs532YMgZjUab7Z5pPjkj\niyGGDX5HgEQzaePUhvvosDIios+Skc633ownXSNsvlA0wvK4JNQm1hkt44ib\niw4u9la2DjdgVFErTO+CLXNy4rt8BrkPMnOD0R1iLwuo4dt4cOavFBZr/ufx\nC+yZo3wvx/1IXs4y+/MmoXmAhBlZjDqfjNlQWX6lo9G1aan3AiUew6Vax2zw\n22o6tALmZz6H2vP+7HcEltpxBGEERiNiwERmumZwiGL86vLEaTBT5L0uBxvM\nU5g5HfdGRMOrofkTFIH556SDKlOzb4Je6HddRzMnDVU06QmrxlqLxYCotZtN\nfVrM\r\n=RQKC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZtOLEdOe/NVBU9bHdB2cbdWwFWmM4q8FHTwUgPDTitQIgRrlaS87e5UcYEuDrHyOX6jhmBdsLDJYK7+5ij1vpknY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.a6d6a1e7.0_1611358366304_0.7029348878135204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b95fe100.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b95fe100.0","@material/mwc-ripple":"0.21.0-canary.b95fe100.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.07deaec27.0","@material/elevation":"=10.0.0-canary.07deaec27.0","@material/ripple":"=10.0.0-canary.07deaec27.0","@material/shape":"=10.0.0-canary.07deaec27.0","@material/theme":"=10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DtSzg9ZscFLsVFpjmfw5KK0JGAtM0xIiV4blAgK6ljhnZ8LDWqmJGwqKCk2XTwtmK5rtBNiAB1ZwA1229bY3ug==","shasum":"30cdc13355e1fe656cc67b5cae4292024d055b4f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b95fe100.0.tgz","fileCount":20,"unpackedSize":83399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UWCRA9TVsSAnZWagAAmhQP/11kshFJBgYj+74O+7/s\n5Sc4TO/0y/zMV7etfXt2TrnSERwwH1YrbnDTz/Cw9ySKuEAWxsot4DOBCaZT\nqwl2DVOXnDVcYLlFkVaziypT6MUFEVmKm0/PY/VVYaV50T63tVmhDt3glrXV\nDS/EWTEorxYcbdnOVzE6GoD8kjnnFz8Qxr8o4Z/Liwzk6tpTv2Fh6veFkiyA\nGSR1eu1itH3S1ij8iyjNPbvWbP/vi5LA9e4wEz9SI1HGjXt1ZR0FXeW3tQu8\naVHZbIEkimfmNezaKg50w3rzQUjr5qvAKKUCR0mNO7EHgnu+gmRu+lB69YY4\nhsXGxpsQWTmy+DTcjhV3Nc2+6bo/R5DlvGw8JFyQDaIhnwf3841IvivQCZFq\ncH45k3dyQORDcz4fubRHL55wpLx4oWeUDC+KtMY/CTtcmLAUhM8+wrohDIbo\ng2p/AYirBqc5h/3dWtKsWQvi7HBF4EivUVhl/sGCw99EryZxFZEBnNnbwThL\nhX94ZkJftWZBvV6qUX7rNexISudbgH/IoTHj4sRH7cLlSAmiH8nxj/R6mE0T\nny+846ncPU0k6yDrm5jhIPbPi2zOLdYfnQjnkOva9ea+G1eUF0ct4W58bseC\nfNUCL3i4IxhmF0T4oROIK88wPr+3BwgKOkoNSu1tSbNSOz1yD/sBWS0w075f\nNqVW\r\n=DRDm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbYEIe46ylvru9Rmj32cjvKe1tI0UV3LwPqF8/3C2NUgIgauyg8bXtqyGbkXprW2muxKRuZ8Z5DLWO7XT2I+Cv4nw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b95fe100.0_1611359510435_0.7124323529226391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-button","version":"0.21.0-canary.c8797192.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.c8797192.0","@material/mwc-ripple":"0.21.0-canary.c8797192.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nMmjWu37umihK/uuiYddiV6nxpBpYi5FsUK78uNFWDYkE6rg6h4m4GhI2NBN9ebugMnt79BY/+cOkdXRCVDwVQ==","shasum":"2c19ebafd9cd54cb721d95d6ad483eee45e97b0d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.c8797192.0.tgz","fileCount":20,"unpackedSize":83453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2ixCRA9TVsSAnZWagAAIO8P/1B2+7r5ekcPwQXI4NH5\n3q4AP5BcSaSArQatHy6xArx5Lrcf1XofK9YKHfZdDZKzW1EdTsUZrskD8DRA\n/f+NkDZR4Ate6tfYB7Hc16qF+MdCmK03hnJsxDFbF50S0mEvqLTW2K1X8uwy\nWbeMo8/GoYTTjqxsOe+MpJEnDD13EMm0yQJICMrY74uIO+Y8r9ALS2CeQgms\nPKFnR5c3pKM4zfMKeJqu6vktTtuXu4da9Y5T8dxA4GV1jDl1kqasPBZxjpo/\nIZahIutPLAatTB2Xe9QKOODRJYdWTHKMp6CEECar4v/60l1Gxqn8R47VYw4t\nGNwAWLWBekK4ZSLhdkRki+iAFYxVhJA8Wxmw+8YWzmlOJnW+XxqVTY8ukx4+\nsPLRLAE1mBhKlZvQGn2mtqGwX3Cve3Jej/i8ofpVqmhPIfHBceNeOp70SN6M\nFtxd7rKm9geC4DxUDW1XYQgoYfjWRqvjwcz3ksDC7N3mp0Q7Et2ogwKD8cr/\nKhGLGp7YWZMwrGOOW7YKLUm8aG3DppZpeSkKtD2SbNpHoK+1QEv+FvcYGVQA\nepYkaM2ern5T2+M6MFb2GESww5Q5jP9SKjON4/C5CP6YIvCQ6PEnggqGGZcp\nMfQF/7cBcaoEg050EP1QvyfdXY+It2xRlpFsWGsSywaDBwccQ/Zyjsbqr67A\nGW7F\r\n=c8HW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAqfiV+6jxBP+Mk5DsXMIeAHZ2jqfFnsHo2MfE4AMzVTAiBzc9EEOGlcwASG9GoYfaBMjWMuzAhJhGmnQhzX6CxMTg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.c8797192.0_1611360432770_0.8885430484294294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-button","version":"0.21.0-canary.946f5563.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.946f5563.0","@material/mwc-ripple":"0.21.0-canary.946f5563.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WbyoqZS8tvl1YcAHCMqutD2fO1Aafn33Xle6jMRZ4bSGp8IN9OpKbvY9lpM/6nJ+F1JRE0rAcumbbx4Z4g/9pw==","shasum":"f328676242e54386b65f0368d171e943b4089dbb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.946f5563.0.tgz","fileCount":20,"unpackedSize":83453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3EyCRA9TVsSAnZWagAA8loP/1cVDRwhvl2v8RB1GQ1j\nn6yW3xyJwrjmtWgs44lN584O27j+Az8AQJBwS9yd+XMJLf4Ne7Ikz+mObNv3\newKVBgAjrXzIwLrsTIUOy+rdQt+Rm6avfcIMGEqvJMWMCXrtqjndK89hRPqe\nd5gbJjSY5L9KBjG/raIM69waUKNGrMhttjkoAHZolNBK6NLEJaZr5BFLWUua\naka2/ZPsBeLK1by7JvFlIkbwCizbIKRSZZ4AkcGQMU3Ne8Li1Iz0SIrjH44N\nPDsIaHRDnx3Mq2oCadS0QGB4GUbLRmZr6EiTE8TCWyRju544A3Kfm3X+xb6z\n5J9ay6VQgPFj/uOHLtFpFqlL96JoOG6sK6MqDsVsUn93A/Y9umrIHUwIUR/s\nkzQXzP6MwWPWVxNxRZ8bKNuKUV7hQs1yxVlQHOu1lHfUQIYMVPC5bN4LFmFJ\nGDSoOkrWafRStkSTswe0YAdHEWS/NKzOAR9nHUQI8I/rqVNRMx1lXQr8sRMo\nB7a80QKVV9mAf4XEVfleiLUynrEp5NvadTepiZmDOB4C6cC3AOoHj0MZCNjL\nP4E0CB/Uh+N1/cAwyILhwvDs8YzFy1Yf2+N4RWljw68/gc+zXYPZPnW1J00g\nA4ipy2YjDbt4Vb1TFV16Fc8nXnTJuIp4K62YEqKG1r3X/NaORAneEJoWfFu6\nlAgI\r\n=3Ieb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqUZdwE05ARDDQ+8q1eTph3kKrXKBtiMw2zj6VBN+eRwIgVp+tn7kMmqQukHQZPn9QRCia/qL6JaISooG3iukl/NM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.946f5563.0_1611362610276_0.19092034380717982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.43664f0e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.43664f0e.0","@material/mwc-ripple":"0.21.0-canary.43664f0e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-IMqlYCiSSb5TkjcgnCuCpemX5zUEX1hxNl62NTKk2MKCosskFNdx7R0a/gGdDukCZNJp1NU/5nJR+L0bGITgsg==","shasum":"a92231a21abd8ad0d05439b366e021d221e87243","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.43664f0e.0.tgz","fileCount":20,"unpackedSize":83453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jDCRA9TVsSAnZWagAA67IP/igKswAmrI8SSL/kO4tm\nnZzr7BPEg3hqswbNCDY3RL9C1Vaj3ri+4JUEUEXyAF5qSEY3g21w/9B2X7Ek\nzgMHkGHWy5OH+UbHHlbY9CfxKk/s7CnP5Te13Aof1ZzhUEXtit91Jj6p1Zgu\np6TejosA9zPrpTuWVypSR+nmm14Q8SpSDOpZZF/aBn7Q/olt0Si/rs9HRN1r\nsyIYN2KcuGti/5lzqXrmIIQ2ZDsNHlVunWmwT7Cm6Ut5Cv1rEcPZfuALHMuB\nYmpC/ywxVZuBlv+BbU7/rbRh7c5sgT7ibtC1TOeJp2nE23zdauURcH79OXYM\naqnbdqlAjcFREi3RYwe/Rscn1v0+AxQxcMY4EQHy4xbk+RBqDDYprEFq8kYA\nYOK6YpT74bR1jjmHzMAmuRQ+9P3Ft6N2phocZh+Bsg8oS2MBvAeUFq4egH8w\nW139gjYVAtcvLP52mS5k18O3gDPQthMU5DdcZP4g+13zg1nSHHckZXrmi2ao\nndeJ3xj3K0feKzb+KQkhpHTOaoTCHHVPRTl4eLPseqd91uu7ecCAWwt5377A\nyMHq+PlzPFgQEWVRrjDShimRQRfx+XHarN3ZL300zhBaSGp6iohLXnE+GV6D\njlh/1yWv4iGGjQ7z6qJXgFruvqDE08z43OOUMBQFSB1T14DMbi9E8p64kl16\nqFO4\r\n=7MjW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDH9rZJgyGrDeadILXWRAs3/CfCSveC9Ojfr/BXpJtKMgIgP1QX0eC75bj+gA41dgzPBakpIhdVh7oMaKdBctRdvsg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.43664f0e.0_1611614402808_0.3413304607344243"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-button","version":"0.21.0-canary.2e769e3c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.2e769e3c.0","@material/mwc-ripple":"0.21.0-canary.2e769e3c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.b9adb7a0f.0","@material/elevation":"=10.0.0-canary.b9adb7a0f.0","@material/ripple":"=10.0.0-canary.b9adb7a0f.0","@material/shape":"=10.0.0-canary.b9adb7a0f.0","@material/theme":"=10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-n0Fquytv5W+Lu97SmbYuvpb6bBAvqG6HaA4cNqkJ0ZTMMqZCfy/z/9AVAVWWIhisXiTfOfLl1mn2lhTG/kos7g==","shasum":"f4fa18ba93a832254ec3b621afa4bece9d4aa483","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.2e769e3c.0.tgz","fileCount":20,"unpackedSize":83453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD1z2CRA9TVsSAnZWagAAF38P/0eJFLLsolgUB0kEzGNP\ngh+nTGfjiFDtSLSTKQKKTbH1e+hBIIxau473T3KbIWDL7XwN9lth/IDWbRoe\nUQBIagMACYAe2R6eEtyPkz48IWtuzmlzruAW9PPKSlwFvzYVMVQCsMh0r/Li\nDuZekErwocQ4rmQA0006iPs8ObvO/ub73VAIt6cd1+pWMYOuIwjGus/6eSR+\n/hu8FMChxvPYN8vW7QX4sogPBJudbPZyeNHhglZgm1q4M2+4v5TL7bXibXkn\n+rHNouh+01Gn598V2LjElHcugiHyoV7QyNzT/tewfBoMjBh1K+SKM8Uy4WiW\nUTwGf5OG/4lXU5IGtG/4s1p/TSvx38fLI1VsaNAmpfiHxd8R5MjBIGdOpv2y\nfDH61eXYW+xb/Xt/PiKTwhpQerO7lgoNg3FTnhnovlD/sN1iW+dPZ5FVAtsJ\nTZyVCaDmIAHEN519MRbSpJD7n1j2pjIygHVd8BrY4sifns4gkzrl4h9cWLYZ\nFSe00l3repqP4QA+Rwj1/J+lilypG5+kGGGUsT/G4wCNOrfmjwQi+iSaNV5Q\ngKSwoSe3x8BfJ7TAi3jGVp4ErOxllhYGxQjy0sc9zNsvltt+vm4eb+3QM5v/\nTYNttOjbHisEkYdPQYpiEv8Ufo7dFoVcDcNjcl5ox7GBWGYf8kkcTtU2JoUd\naUId\r\n=F5yb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBU2X27nPaDpAglIleF+8I1podzBTiqKpkTiKKBe/nN7AiBhl9BKjIQoDaKODHYCALfeR1FQNp/U9nP8KttVjMry7Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.2e769e3c.0_1611619573661_0.8633119188625513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-button","version":"0.21.0-canary.14e01610.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.14e01610.0","@material/mwc-ripple":"0.21.0-canary.14e01610.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+gS/30Te/nc0oaCaQh6/bofn2PVl97wM/1LOcSk7lFlMgkoOMjOKP+cU9yAZA1ovD15rIh1PYsT6agZQsYggDQ==","shasum":"b79a9f52f57c4c493f6494330a96f32959178531","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.14e01610.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcQ/CRA9TVsSAnZWagAA9LwQAJ+PtEQ7i5lDzhf0BH/Z\nMlVQsR0Q+RyRNIUUOy5a/cIfe4T+bZqNzUvj+r85j3WL4Wp60BnUo0UrTXCR\nbtNeLtf8fwlBitha7dLvNZHLAvPNwUl7XbzS/cd9WyNPDhEiV+LX/7Bic6rz\nfvWWu62cWtN80oEmO1aG8PGwyUPPzWBiDlTkYYaaqj9ti8fit4TNN0Epaf5s\nqKWHFvPEHO9mCma3QhgyNAxrzBEdZxKFQoBOGH35fy6D+aVy87yqoKvHDyQY\ndTtAbADnkMgROYRfxbcosfW42Wu9yPGba9ry7HkbLLkU2LgqWQuLV6WY4umj\nZTTuxPfl1AW0QBfQAHXlvUuTKYUL5oZchZATTWjQhXRkeRY3qcWkj9gY22N/\nX64KZwO0MTeXf6AQ0vgy5eXpddkc7SWC8nsrNnEyQO07RFtVf1OHXtFYMGF0\noFjv9lh8ORKyIDYgiHMJ1vWPupdzoTwUjB51zaZsoPYIsFsb4x09vKpV96wx\n5RDiZxyVKfQO5YLZzSVgvHCWTh2LixyE/TlCDADWE8qON+XU0UMxH6fqesQ9\nuj7uLudzKt9M1r5qHJ9GIMPbLZY49/tzB003zAL7hUgpG0EtYxF87f6ZIVlB\nk01kQVrZiJzkc0S8lCQU4veRhDkYwiK4pt7N92WRez3cV84v040Z6RYJJvHE\nXt57\r\n=gsS4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDV/QfrSepM3IXzCU83fbdK4rFEBC2R042Z6oryox/t7AiEA4q3iXXz6ijab0G9Qf6wDzwfLtw02Os1VdrSy3FVM/xk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.14e01610.0_1611777086902_0.5877291839031287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.5de00c1b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.5de00c1b.0","@material/mwc-ripple":"0.21.0-canary.5de00c1b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2tI4GNCEYR3F2uXXxr1rv7XyY68XzYVsxkgWdN+AQigirNOqNtT/QT/yKmmMuw2IQFklLlM6w3n/hMwlKo/OHw==","shasum":"0415562d1ba16da10643b59d63feaa827ed709d0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.5de00c1b.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpECRA9TVsSAnZWagAAPB8P/iaMTlkq/DP2sNq1cwPl\nqH4Q8Ya3C+zguAJNM3lHzQpmFLDqnesyuIYAhjk7isfsLdjrEaj+EBtbAdHS\na4jHqMZ4k2tC3d9oL7skE9gCNso6+gNRlR99VSxdD3K6tXXUCXCTQnjtejT9\n4UmD3VDnzVZOFp+VJZi6uytyxyNUgVCLFvCeRLf0wVLiSXjKzzYqlXQFOwWM\njf7vPgOkp3pK0nGEHtjVD1165vUm++Xkvdwt91HNUu8vYvr7vIpA1JUth38H\nMs7LaB0HEPw5Js9ddwFWT6VkhSMlf8lJofDLfWwkOY456RQEl3Aj+lxwSE0i\nJFvfsGzNTIlYYSyPhTky3EAtR7iEG7C8wZGWwm9ta6TolnuAsvIT0yAGf7D0\nXTUTW3ukGoSSPADEhKIDByhJmyz1m5kLq4HQZzaLh0LEeJW5JEU87tP7ibVj\nnSvepNwvFePiCDcUa+xYpvBOpx8Jw+Oi6gZ3M9e03OZG98GNUHQlj7mNpXmA\nYGzPwmUTea9o2ZtAyIk1tzpDCd1FxFOoElvGlcgi1s/umG5lI0DdZbWNWipO\nCYRtlwG2OnQF7pNdHlbyV6AiHhsjGtlcJsQcxaS0vqF7L2DFgEyP/q8GEVMY\nyiuu+z58okFnTlSnr4LRPNlYFH0moXE81LNX4gszJPpZISTxl5hJjFjEgqcs\nTvk2\r\n=REnK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM3rGQZro/WqlBMUEUMlt3iU6jUcKev84blcFPgSUzDwIgFrQ4iN5em0oZ74UCE2O13mSgDLMBoT4b5huHrGd3/ro="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.5de00c1b.0_1611778628067_0.14757212077847548"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-button","version":"0.21.0-canary.5a328336.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.5a328336.0","@material/mwc-ripple":"0.21.0-canary.5a328336.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-FjROiyTkkSSAmfY4JfohpDfFl/ayzru8Ht49nTwqOJR8oOB/AOzoL5Ay27XmEeW1M6bZ5N65nZlkLILSTQ6Bqg==","shasum":"b99ce36ec7f0de0f8d0edc0b6249b7fe8a04e122","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.5a328336.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExZ+CRA9TVsSAnZWagAABzwQAIRt7wuyepESgxTqijFs\nY33WnWtPiaZ4iGmSZqn9mYd3KapiV8lHPsiIO3AvL0f+mn5vW+HKwXlL1BD4\nDypp/5/M9FMyjO0LYCjzKDbyITPPxAYkJhYjfsZ13mPCpuqp4CSEOcZpP9ir\nX8KlTwUn2lmMYzMYgIaB1kxThO7UoXwZyPTrc25rlByoH6RQi1V9KC62k/jA\n83MWWOJnBCWl0mfekgq6wdj0gww7/RM9x4LtjJ/AHBSJDBm4x4hujM/kaEoh\nA9YiyRt65GWraUEy8MvtAIcYhfLywLvMtPJDW3heQCYQwDpvnRd598hnDrDn\nFKQG5xz6DB5gbkLaFBKp0EMkWYZoFKG+zd+BPjFjXcwfNbQqWpflGCW30H0a\nra1HF+3a5y5gATw33e243wHpYJVNrYaGfwNLCwRO4XfYOZMxY4KxRKWnf3It\nOwPGVqMTKMPlJXI43/NvN9Y9MCQFcZ2PL5YrlKtFQ06oIp1IE4zOCD3OeB5h\nODrCNhFi1AMez+6WIR9ptU8eefeGXQXAtMWkBnyy8I1uD2ivqESYzxF9kywH\na0vgmQVnJyuNVr0IbPbulY6T7RQMGmvluasADFI3F6tT5JIydO6etLcHr0qc\nuhvUfQhyRTa0SgM8BCBAqXlRj0sRPW/9PNykYgadsCsV8o44sKUiaJG3eC+/\nDzG2\r\n=f9d0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFhSOXWgh/d5PcAb7yuwREioiAjUyg9C73SejbzAitYAiEA9wzSSHarbzoR8APNNSHanOjh0zuOhGX8Zkb+6qd7yMI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.5a328336.0_1611863677610_0.7061810577857974"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-button","version":"0.21.0-canary.533b1251.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.533b1251.0","@material/mwc-ripple":"0.21.0-canary.533b1251.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-oT3aR+IiQ0LzHDmwAyelZbPNmw73tGDrMjRyxHineSlD7lNMlJk6JjeXCrvib5jWl5VHHJ+Y0yP9xavSFxlH4A==","shasum":"77c793a5217c313df0ee431876cf975132f0062a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.533b1251.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCWrCRA9TVsSAnZWagAA5SUQAIjULwJfX+U8cl/wPB6a\n0+aXdGNmSlA1pPTAByIYGCnlaYeXPbFWGEOz2K5cQvFgioHVr5tdsXFPLJt3\nZ/l/4R/UyjskqJLBljCGKkXDjKvUkQTRDQDSkVfZJ7Jrb5X0IZi4LwLq2EXM\nIzhbnrXy6CJltOX9B4QCbb1rEpyCbrR+I9RmCECK5GOrVXNJVqiYkRuldYwb\nAGCLX7A3oYKuzWu7nNczUeMNk3GkWhGZDGfNUkvUFO8N5gMzc8oo8U9ZmQzA\nfVdMYhqkMeFLz4Ci7XUG+KLDAZvo12nkiBA/Jq9h/3SyxCPp2YhQEpUnLUQa\ntN6YfV0XbN7plT0CrGdT5RNb7TWyB5U4ktJ5dxuWi4EQJgb0Lg2mMQ7uVjHF\nlstoZGGFzG+wreOm6sf06RVokOz6F/r0ox2+he2ZCyFlJ1fUJ8AEjkexojj3\n9X7CGdP3TGTQwHSAZqFXmsOxMp2L3BtNIAB3cr377ck1x/F9suA5jk/oS7ft\n9QpNi1npyJ4bwv34x09+HnbrdS5xn5ydmjsqvUwHABLrxNl2b4Ux2+fPleNA\nQjK7YeuZhFZpSxr7M3ql/T3y72S612IDpohF78Pp6z8Tn2eDzAnYpZTcmrH+\nz/OYrH6XVjnDClBxsJ3uQqgfWeRGQM1vyY7USes+bbaVtX16613E0UqQvpWF\n6X91\r\n=hw8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCBrxb/SzWc2ZNDhtc8xRYVvPcVPtO27NUAq2l6DEnlgIgdBMpnQossSwW/ViBotV3svXVjJIghw5nGRobcaFSvMg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.533b1251.0_1611933099219_0.9167480566920807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-button","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.ab5c0a10.0","@material/mwc-ripple":"0.21.0-canary.ab5c0a10.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RjiWM3fHd+HLzdNi8ZXrqaN5LaTbfMXJaoFg5E9ElKekozreDIw8yvvACaWNBKKCc8dHmIxFr5AZpl8jeWg0JQ==","shasum":"72d605d36ce1d0e7efea2567ba2260eb3612868b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.ab5c0a10.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNWCRA9TVsSAnZWagAAuXYP/3+GRETo+UXue0EtnJLu\nCYlLc4zWSAz8CKIH9KZikgovcGPTeVCvVJc1cZKIua2qUCu5enDPWRB4D5XJ\n/LG2hl174dYg68qgY3wOLQzqMIkv6n/6OpUnjM0p0mvn2mK0CoPxC7Z+DzOj\nXb2POAAMksxzPUDHGDttgTARLZhAxnWeGTaS/yLO4UjHr2ZLSoLku/3CJ6U5\nZfKHLLVWAzbQVB+2OyywO7xEfi7FPPvqz3mdVyGb+DMXyfzKqaal4TT/hqfr\nwRMNAK5X8pTKPWdA6ev5QTGKohm4q9wNBZ/YwKDXK/HBOsNijsgjEDFQry2o\nY59yXYbG9d7Oi4vesbFzuiGNa6EMbVaz/3x75t8Gpw/IaykHqENJii3aTaXo\nxIyWRailwAmGXYfaStbmAx4+6sNJvFSoNn7Cwvfk2/9uZtIuxWEcbMhm1uo6\nCeCYgEKz/cPSglkP9OAuV/BeTfo9EgIy+3ayXRhlg/ZzN3xogKtT+yYorgVE\nOVH1EFmr0+UsfcC4qnM1cHMmd0Q18TNU/oWMGIY7u4Sxd1MtXfZ4IlyxNUE2\nh2MeuXDo5viOHt7B3HtxUdox7Z0p5TOso9yfiz9M1tk7OigLheDyewp0WM+q\nqOmnyvQRBmaWGZSpkRHYLkpq5Rsg1D8u6RS4VRnNT+l6LGFL7nYeM+OkIoHS\nHGcu\r\n=KkpI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgmgEIMwp6dH/aMXoA2jHM9HN6uKYaa3+xpbpihO9QZAIhAO3z1Ybe3SLU2xye7xtm0NXf9QH72TI2bi+kHGK7Uzva"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.ab5c0a10.0_1612297046342_0.005826809062072336"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b7a40b27.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b7a40b27.0","@material/mwc-ripple":"0.21.0-canary.b7a40b27.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.96878e1d0.0","@material/elevation":"=10.0.0-canary.96878e1d0.0","@material/ripple":"=10.0.0-canary.96878e1d0.0","@material/shape":"=10.0.0-canary.96878e1d0.0","@material/theme":"=10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-TRBb3/eW5xu27XX7xA48wGMxPtUBsYAkLw54aKRIi7d5TqMwKtS6w9BFa11EixCze3dMzSsSeSi+pXJxwwoLLQ==","shasum":"95abd855280c4ba272eeffb4827dc961ba7a5a0b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b7a40b27.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtRCRA9TVsSAnZWagAARIgQAJP/e0GImqX7RU106dM0\nKiGIME1H9sWf27nxiRzQmiKolmuIOav0YMu3TNircjf74OaewUo3cu7pLImq\nGzZAht9dGxIMv38jw8s4JRc/I+sKJ/ugbZcxp7KQN58RJVAdZC2Qgq9Y0BOw\nQD3TewGTGWNtglnGtdwpSl5lz1q3mGzs8Oc9LvxeWhqGedzQuN5QUntD3Sfb\nJbFJk0E9iSPLabDqH0p8ECnLuRllc8ncVeuHfpJeYuC6HAMbNw+lY5Iwjiau\nQM1nevzGrrY/kqV/x/sY78HD+YQVpazXQQ52GbfZVqROztPZofvu/mFwK/hC\n0+rxlkj7RXkv7ljgzfLZc7PcgQRIjqMSaPpNxli4uv+mN9uEuhAtXrR+uLhZ\nK9VubVUgTX4rswY3XAtwwrKO0kT591+PJS8kEVKydawr6Zpspf12/5aycuk/\nQ59K6uXgr0N/khDIPSHFvPPx26N4unLeLZT/NvmI42J/caNAo2OUXDtuhjAy\nXCJkDkUcbQruNN2IrBkm2vptRcRUF0uzftN+3Ze26S2Sndq0Z7oTlq7rhHMK\n4SpMX3xzvX8R82lqKPgYGnl8rVLIMmwSUoj2d7HP4r5Nrr6nTosoxrBk3Pxl\nFzV9gsfaAddgpgKsvQTV2u9tzFeo7nTYCN1xsRLzkSXWVBxQfNrj/TnYD0pR\nPwo4\r\n=cLmB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpfrCIQu9bjDpSlvT6VD99Dhx0xPKAyFAUz7LC11wC4QIgHyulnTa0nFxzxLmZVK/c5piCpkpexRFt+bbxqDpZyRg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b7a40b27.0_1612364625270_0.43739484100745263"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0fdee204.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0fdee204.0","@material/mwc-ripple":"0.21.0-canary.0fdee204.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=10.0.0-canary.8e66dbfee.0","@material/elevation":"=10.0.0-canary.8e66dbfee.0","@material/ripple":"=10.0.0-canary.8e66dbfee.0","@material/shape":"=10.0.0-canary.8e66dbfee.0","@material/theme":"=10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-Jn+ZNnDRlDI8PvMRQPQJ5uVH8oUCSl0576v77qcxFLuDw77PYcGoHuuhO9eT4qlAz7evYtGULQw3+D1+Rrj2CQ==","shasum":"db9143458d2deebcb0b5ce081be52d18f84610e5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0fdee204.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyeCRA9TVsSAnZWagAAtqoP/i/pJil2MQ4K40A+N1x4\n4gJhdU6qaEnXZr9nvR8EwbLdgaGquZ2JWzS9sESNpxTHGLzKQIVfQ5xBLtQO\ntDsh7ErK3etdArkm7XocNS5nDaB4s+HjVdAXb1rOAcL+892zPPAzuXtu54kS\nizKcyrl5w9w5/RuEY3gluM/TmUGEoDQnhyEhlBGySLMn/KoCpL/49E9s1f6Y\n5ujFYxKRN0t0H+YVqrRgYc0Om33mkQCoqbvdlZ05PHrJK8vJRozsDed3Zpnb\nVDWlvp7XMvKwL/htQtq6T++rHa9CCSyi/5mjdKMVCuaKWrOxb8vveBz37PPp\n625VpPVSuebdtdYxGquCsUExbWrOM/Tm+JQ3L3WkqBLJMRJTp8u4NjGgyE2o\n675GjUj9Z3VkQGFVnyK8KA4owVBtl1Zix1mSVI1KkNSTIuVpPyPuFIpEVeIN\niZNWcVF1OgSIBHkyZYDSWjxp86Q29H/wxQzq0kpLY7X8SsZOXktv28TzGaVu\nEyKwok72jQw0E3iSpBISMRWKolhfTYXejdclFaPqXczyIn+tYOpHxrJDbZxt\n9iKAGBsmLI80/nDqjNqfJZxUWfcNd2KNcz5wR7UzTBFl4uhm3/FIdIOlw2c/\nxmlHIYWPbUpTh31u8BciLGgDcaIKD5yMNFIiJPk+vs2TXyjc8iKZJFQqu/cf\nWAcm\r\n=iqEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIJiuf4CIkl5CnJ0hpHYCopOwtKZ53TB1AN0meVr82RAiEA3aRuuUger7/Cm/GcLo8zwpkVduhbuTmgbI8bmaR/0Z4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0fdee204.0_1612377246080_0.9995144807179603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-button","version":"0.21.0-canary.5160e548.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.5160e548.0","@material/mwc-ripple":"0.21.0-canary.5160e548.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.b5227247d.0","@material/elevation":"=11.0.0-canary.b5227247d.0","@material/ripple":"=11.0.0-canary.b5227247d.0","@material/shape":"=11.0.0-canary.b5227247d.0","@material/theme":"=11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-t3XljLKuHeHNssXk/4uNJn6LkejbJ3IVo0EjEQOlj/9CnLnHGGmBymgFmKOvGH+PCyQp2CFG91dMyh466NeWcQ==","shasum":"3190c3b1f61f60504d67b26a534166276ed1a66b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.5160e548.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdn2CRA9TVsSAnZWagAAvAIP/1W5wglXLvKOtqx02fOk\nC/jxLXThgp+Xp/0zrk+yTzmfad8ephDS21xLJTUuMPjxkAkk2qoIw5US6J02\nbN57Ezy9chz2r73Pl3UbekUOkTp+q0FqfsD9mlFRc3YluYKWRDnq8kFiy15Z\nfEU0BwSvazwPqjYmVBU2FjaxJme0zEVwZsiv7JUPChOU032cUEzat7Or8KU6\nQT5gH9He3b+5JcD9kcvyIaV7ojq/z7SjWZf+Haq8LPWd4vXBCV3GU2p39Ye3\npPNrr3PkVlgUOpLyxkUz8YLZDReC4hA53MP5aPdJ4x7HCvBnRoyNYazSa8q6\ng+EPEiVd0WKqsWaK2nPxyMvPbMSFRTxzfEaj5ko4/rTQdFWXxBrLB/xCAhxn\n9Zj53WTbHmyBqTupBO+a5rKO4uDlWFQCMhVi2bRHceJHNx5chLjdV00sRy+X\nwANJ7/CqxexKcLWHi3r0JKq5dps8rP3SL43wxCqyBDKp61Kb6RRPBPfyoDk1\nDCvtELPX3eRrFudSQz+0qMvauyG87p0mCuwYphe0tqEiHCKFtHStcBJXgqEX\ndwSZroJDPVIaHTLQ55BovClFX4vonjI5b5rvDozSk3lxiRgMQVMOxZ11IVW0\nXekfYzWvBuMwNNMgZ0eRLNDKAv1rJ+iaMfTdCoK8fnezWLrE4IQH7NjKIn7i\nBveB\r\n=SzJh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyGWSESXf41EIcyt+v9aHtchJZDnR6pnHJRSFBvNYkDAiBH7LaWZAghR4eKMq28WN3ANu05+U9v6nFBNUF6jo3C3g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.5160e548.0_1612569077567_0.12310077924483553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-button","version":"0.21.0-canary.4fa2daec.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.4fa2daec.0","@material/mwc-ripple":"0.21.0-canary.4fa2daec.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.aac8f5d9a.0","@material/elevation":"=11.0.0-canary.aac8f5d9a.0","@material/ripple":"=11.0.0-canary.aac8f5d9a.0","@material/shape":"=11.0.0-canary.aac8f5d9a.0","@material/theme":"=11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-1fBm89A/K0tkyo4v51KdOQIkwtUG9Qyf4ZvwCXXxCRHfzRc63tt1PFRJ0oPW4ZyjL4aH4408kU2hPmgreR5jbA==","shasum":"d3c6b7412577384ccfe5357c466863df2b31c161","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.4fa2daec.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdTaCRA9TVsSAnZWagAA2TUP/iNFzGqifeFTpkiKDtLX\ngqf4GtqwkTCVVO7htqaj4GN1Szj7zqKM5bCyEvN7N81X9Qap9yHyfcjhZ4IX\nIznVTEZCiIiqLOONIsAQHsFdd3T85EsQro8j0GKeTCjjbdlTNWLB9o/FFWUo\nV7k4hN9dwZxJL8FvGmqpoTEHI5kqmX8IBDHngfXuLPDeeWlYHPzMK1hom83I\nZome8U7U4XhOlLIm8C/oxMBYuBovo1FjWcP8tOUXEeL1oWyrqf97eICzLiBY\nYafPXGSsY3gx73VSINfGPfMAJuPSStK8SR6+kGLE5uh84Ilwpuam7v+6GkNH\nZ1lAgNGcky+309K3/9cmcLTn3kiFTy2Z5kkxPuF/pE6UAKoOEfyo5y+cCQsH\n0DCzZJqsG1nIXc8vnjJawWWrUYUO7MgDLj8trBhvYk55+692F//Sfnq0R22B\nSbFnsPbPCHPmkla/LEf4qlJgTMAjA7tKPbm8RnOtJkGc4zX3RLyQ2w7to4oB\nO7mrWGayGNljbihgtKqM15+aZZEcXYBSi6MlGlmgPK//2kcYUQc+u8AmUZ/U\nl3MME8flOVy7UEghq9ADTdYhUp1DI7NVg7PgeGQOa+LrayJwR239AwWiSmKh\nYR17JOlxI9k6OW+iRQq5CYi5CMYIApP019J6MP7Mpqvlt+l7InSCt2X038su\nYiJk\r\n=QNqx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBTGSbPh8AbSH4k9npzvni0c9vMr6pDD0dbHMDsheBkDAiB6BMXDt+rjty8DTzPXPfyMMC9ZOaybGUiy+pK/zNNiGA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.4fa2daec.0_1612829914340_0.7562342483767979"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-button","version":"0.21.0-canary.67f285fb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.67f285fb.0","@material/mwc-ripple":"0.21.0-canary.67f285fb.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.750e18fc7.0","@material/elevation":"=11.0.0-canary.750e18fc7.0","@material/ripple":"=11.0.0-canary.750e18fc7.0","@material/shape":"=11.0.0-canary.750e18fc7.0","@material/theme":"=11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nf++jfSPeobl7D8k5rpnCA/IG474gQWx0pqFM4qLK1daQvfMvc+AIfnw53aOhvMwJF1KlRpoOphsc5+aGt3KJQ==","shasum":"c044b0f6b6c0321308e5a034a15b5e8ef6799296","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.67f285fb.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdx3CRA9TVsSAnZWagAACbIP/A8RLlifUmuWKbR293dR\nPFeSOi0WHSbMVRoa+WXeoVr0EgwttLpTCRBFBwUyJE9W4auhVLu+KeaFgmh3\ngHB5Q1tBD+fCLVIYsNhcCekZ7P9giUNtVKg+ThlZlAUr/mD4pZML9gcqzVxf\nxNeAmTkYk+3qiiY0rsW3FQZsIAqDbacKsCnSVNVj0mYKaPQfe7DxhyRWHeVm\nK2UqRes/yUUayczHk/uNY6oQz+s2osUf+9oQUIm2f9mhRW0mNEN4BM/1B4BB\n3nt0O5zv8MHsRg1egEnnVAwB/oqMf4wfSlvz+ppdmhNl/6ZN3/UAh+wL0KxP\n1suicoN+1nbNA3mOCOrVsBM+bwhQbsW6b1fsbTCEO5yX3jLm4cOjOjEyBFFK\nX12BQLvV9nFxxpJfqb76P4Sar3SP4fMIITcQK1PN9aAdW4v2nnhDTvdBZu8o\nJfhSzrqiW8XjLmeMFFDpQAX4QEQvrQeF0gx2CIt8UUi8/w7N59VAIVAtbf6S\nOVAuGHRyXzD4Kqrodo4abD4rXRw7oXpSBHVhSmOXv+3B5ZS+p8D8+f1hIJzR\nyHhmFUfWMbHnvlopL5ZlQpqWrTqYnkS9dpc5M2UANogxtpDVo9Ey7I81YEme\norqlqMm8huJ05kk0oXpkyNJF+Rgur/ooGNtcmAmcRcC/4a019CXh8aLS/dzH\nKLs3\r\n=dMTd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdzFEJvWjKVkpNi7t6zavABjTtC67Yaa97ZK77LCovwwIgO2rhcOg3WDKjhRtqJABqNseogLe6jXDBH6StpjhqNSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.67f285fb.0_1612831862849_0.22091809721263478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-button","version":"0.21.0-canary.58cd5a70.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.58cd5a70.0","@material/mwc-ripple":"0.21.0-canary.58cd5a70.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.b62b1266d.0","@material/elevation":"=11.0.0-canary.b62b1266d.0","@material/ripple":"=11.0.0-canary.b62b1266d.0","@material/shape":"=11.0.0-canary.b62b1266d.0","@material/theme":"=11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-f65sfFafWO+TXKTrcORSEa6RJ8S+N2iXKR+EsZNt/LJNwQmh6RWyrBhlpUHw2Gglg8+uhyP3LhGAuj6Iji0BjA==","shasum":"2294b9eb3f30e2af2f8d8830060031a183f556d4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.58cd5a70.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdNCRA9TVsSAnZWagAA5tcP/1kvYwmn8MP+LTDEH+k8\noCAfINCMbh7iZqVraGXiEWy/2AWVsXsYLgicDwrC8RuIfGkBSm/5LPzRBTp/\nMFFIZYTafpO197wr0qIjGvfFBHZeNp4v9A3QuwanrrFvxP5Yor3noH8Y8oGX\nXk33HKNlYSl2h0KkETqepx97eCd1OeNqh/OfNXCglSpdU56pUMIc+AlNH0Ew\nlF65Le2ppb/NgAsQfuZBdxaNRArcM1YO7JQ/yAFT2BSH0yZ9T7zQKGJIUyYF\nZqcaR5GpywpVRwhYITtRDOAJ/KxL7pVv1yw61tqH/WcJcakLxoaf+RkReD8z\nXXg8pxyj/UPUKta+R995jFX0GOy/KtIWwIjA1m9eHGsvAazbPuYTbB51LTGv\nLqIV/mQ9PwVlaGAGQlp0zeHrIqXlxFqQUkOFH0qLaj17gj+BA9ojzJQc39+W\n60muJdj/f1To45omHBEA7BiPb/xx19k0l5mjogJ75jIt0QtuZLxIp7Ea3gcD\nAtBKTDzEE/9p8WyV8NoE6zgZaEE8EVbOT9wMWFvlVHKCW9nIZ9QIFNGJIJWC\nIkpe+3T3PFObDIT+L5K0zhdh76oh1jjbywRrGDTpsUyO3ntGgJ9cxCrtfVLy\n4YhR92WsGY5fREiblc4EpqWqwvKgqk7jZzxQ7nqkFumfF/jKrU35N9LIlRDH\nsK0m\r\n=NHgq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCt57UyEC5GlH1RwgPOCJZth9rtRUmYxL2A6KuT8Se1lwIgbuJnVVmHt0XFOMpNDwFAFvKoGgAacC0N/PJGjM7vYbQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.58cd5a70.0_1613076294349_0.3196928245720507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-button","version":"0.21.0-canary.8107ca43.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.8107ca43.0","@material/mwc-ripple":"0.21.0-canary.8107ca43.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-RBb3rkyGNf6JrcEMqATeoJdo7DLp2E8HM7DhsCqujT2hiqln/Ld78DIUgS40modn14XI3lv+nT6Ol1QXkbr3sg==","shasum":"886e7aeb243ccb7d6e2998643ec39ac97bf8b541","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.8107ca43.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb23CRA9TVsSAnZWagAAEh8P/23+C/7Hnw5x7Yh6flzh\nCe1gkPa2pO9a5LlaFzhMWlXbeWP8g8WgIXgJRNj6Zr/9K6vYuFw9ke54Ezy8\noh61mT4v6gK4wnWzpqHkLOqFVfjoHc6bzWJZeV3Rk0z0/VxcArgcAa/eavLt\nwCwFU3ClgGi5KE2Ybu3TnMgGev6D95h9XEIiQem2uzNEeihwURT8hOLB5dtE\nd2mbNHp7TT3AyosJeCPPdACfZQci+Wd/kQVurpcxMGRaZ8mFQYn3YQp/h9iE\nYKTcUHDhzHafSQDCl1hdXqTd4rAAxVaxiHJg1HHDFZs4Ht5sjtKjmx4k8mE+\n7H9Oo3naKqTxKuZPb0Ck17YF5y8kmuhladsYOIjU9Zo0mVdgK2eh9Np0ezjl\nq6CNWvWqEVo1qcxqIEQTrP0RVLndd/5ioTt/yZtPDkND23sLRZKjPLTQwsNK\nD6wiDzMoAZrWXFnsXiWy0hs59CrSdqCj1yX8gN4Vzs8JmXRfSBE71j81w7vx\nsdhOKGTvsQS7RRhCpkGjrzPoZXFcrLQ6woWs+UflyEtG+laeqG7LAZYF6mKA\nn5hNtH/KoEJDsMyNx1sSHG3p+Qdz2ZyLbtd4NXXrLlo/XQAtBaiEgrOQN5fI\nJXL9sd+eShzA3X03YOjSPiINIlrUS5LkeV6vLz3PFDkqzVgmRpz4XMjnwY0W\nD/Wi\r\n=EOup\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdgMPwOPDxKBVIgRU6AQ1xAG6kQ4eJ8czWCL+ThIXPjAiBZ77pU1EPiSx440H2dm9s8RHo86u7YrFV5qaOwU4/dDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.8107ca43.0_1613086134922_0.23108739203667228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-button","version":"0.21.0-canary.d35d64ef.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.d35d64ef.0","@material/mwc-ripple":"0.21.0-canary.d35d64ef.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-KBkxHTs0URHREUcJ39f3oJMDEHEQSA1K6GC5cf60cYsjPosCiXzoCTWn1cgC+gmmSEO88yLNqo+HMkjkwdJZ6g==","shasum":"0972bc942ee1d34bf0ffd6898d0112b5da808aec","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.d35d64ef.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEFCRA9TVsSAnZWagAAeDoP/11XSgx67HPP+k0bQg1C\n+PieT6bB5h9I/Kh7o7QmjdPK8UGN5Wg46HPq/o3K2er+P2AgSA2noXsGGMTI\n+wmivHfejC2MMrbODHaKBiLuZ8rl5yZSny6SRIUI0Icoo7sMTnklCmWmmUfY\nXZw5HKfi04ouBpsTIpGN/zsngc3tiZKAvo0cxhp0OuYN1eJmonQ7Cl1RTlJi\nN0pouGfEKWqP/IftCiRMF4+fuPqslcBIYJ91vIlPJ5+uUspoaZx73zIDT9Up\nC+QD0Q++Sz9ZWgG3ChVo5YW5BM105yg0wMEMAnvkrlrSUORzvF//7m7BZ19P\nndF2Vy6uhwkr+N7HoXb9ZKXgOh5hid0TKQPExMhCGCV60UvWMCXsKqBni59v\no6cXZtJX9lGnWBGV+uqzyFvdjMFj0190s/5tlUGy6K9q3tkzh9kNIhWx4izU\nbTahbPzTMHZdA888Ekxb4G7GQkUSmRQfyFQ7w/iLq/+njFF+FcBU5BYW8YMZ\npgQ73/hJTlUOBtVx8nOtTUhp5/QHKipWtbe0hd10YGgPIb0KzXEu3BPiuASL\nIPSKwxoAFAwtZR+f6zoDXE6kalsjYS6VSPNdwR5LKQ9BaEtCIi8X8RU9J1XF\nOVxtfhdmD8CJS+CSqTbTqGogXRZPoex8Sdve9f4BM5g0DfzT+pdOASvH119P\nsjgT\r\n=3HP7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcje06IEmF40VgNMiA3/fhTg10QFJGd6gu5DPT9HXC1QIhAKc5x0mNy6ExK1ZuM9GJ8UgxMaLgLu1AYTDNBbVcEQl2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.d35d64ef.0_1613086981229_0.8689748614818145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-button","version":"0.21.0-canary.78bcf058.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.78bcf058.0","@material/mwc-ripple":"0.21.0-canary.78bcf058.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.a6b3101fb.0","@material/elevation":"=11.0.0-canary.a6b3101fb.0","@material/ripple":"=11.0.0-canary.a6b3101fb.0","@material/shape":"=11.0.0-canary.a6b3101fb.0","@material/theme":"=11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-CqiYMloZOTQI4uFXHIPL5+vyXzHzff8BKG1ZIEUMwwqMPqdZYRuXAIzl0EsacExc/xfho3DXaA5WY9RCrivsbA==","shasum":"dbb18dd09522dc6bdd8f57a54cf3e726e7be566e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.78bcf058.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBVCRA9TVsSAnZWagAA01oP/2jiDiTAI6Evka/+fV8L\nUJ9CR7b/3Y9bCjjZ37hM8pPLB8fiUbUNF+rz5ExyJvVPOuvEeKPXnfmUfXdZ\nI7njPCduf8u7rhg2tlFp+YKFd83GfhPZuaeqJuBRhZHAUBe5ivMqP0FuRDfQ\nqGIN2I6beabbMWN4R5OJy79FVEKfbdSn5AGtdM9u6WPtbsJIInlUsb9eGdxx\nu3syyY9NrE2P8jeqOeW37BY/aMVlo78OX8K0GoTpu420Lr8UTxJL0mpTmG+Z\n2mqW9mdZWPGs60SZ4SX7ICIiq4/RTrr/wHUgvtgA5LKR8Xf1N3fDxAUcuR8N\n9FparoLNZfGYnT3iboAl3ag9SdSLklfVyjETQF7IQpDBIQ0+KZe6YRaolM8N\nxTQQHbFZD4Fu/huofQ63aXVxxPTqHpvcHbo0TcVEzL6WJxeA2PJ/g5TJ00Ay\nkIJpgyWE4TuNxxN10mxauFhxx28sEjwni88LHjlWcSPyjs63oXVoJ9K/RmmJ\n/t3SK1b0CFWhb4EshR08NM8tMCYLoqYt6svqiuGWqxuszax7EjXTmUIhIgG8\nNK8dv0/joY3EKwkjJBQzZ2uztbvpc1tejxyct+9ejTFXNE14N/uRMCQcBaDU\n/21hXxB+frevMTmdrCi0ty9a++4T60Ndbj3eidlKwnteD3bH+AyOc5BTJDU/\nNzyU\r\n=Hsv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjeBfZqYoQgGMTKCd6g7Ft1wn7Zus70LZ6mUzYTW7IwQIhAOblq8DkbBLdh0/We19U1wpGuK8k9TNRtizkJ3fllefY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.78bcf058.0_1613090900745_0.1649142790606417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0c6908fd.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0c6908fd.0","@material/mwc-ripple":"0.21.0-canary.0c6908fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.ed88df700.0","@material/elevation":"=11.0.0-canary.ed88df700.0","@material/ripple":"=11.0.0-canary.ed88df700.0","@material/shape":"=11.0.0-canary.ed88df700.0","@material/theme":"=11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-AhRsLKgQ3SyQsykUtko0RDnjdyoYp3rY18VolmC2a7TuGc2PtShHL79RBzLg65YlTKl2nfw/He0SZAJALM/F8g==","shasum":"2c4b7a3daabc2e30549e1a35b595a800524b1e9b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0c6908fd.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdjlCRA9TVsSAnZWagAArosP/jQYmDJM3Jm5+ikRtHGG\nYxU6uVRTAbwK4wBsafSdmStzxYASQPw/ZuVzWxHC4RQ6GLDilgfmHqC+VpAD\nbONv18q0eLWpmwcjmVhzYqnmSTLYzQUeZ/UmrEC+R8duwxLOrGhFuFbK1Gc2\nbqKnVXTBqLeutWVj8A8+CnOfuu8lQoxQdPqgZ/HTcpxpzL2GnFSRCDM5WWZd\nKrdRUN01yLbpoA1rcGEv509dthWCwBkFaD1YGVMVQUmGGErpJAjv8uUv0NHh\nY2srgOPHV1OLgjQDFBYwWq3npB6gCEEU1jB5tQzOyGHlbo1GWYBKQglNXRQt\nJNz0IHzTSMLFXHG34Fx2umzBU/qNyZZn2YryG53dyc3gvcadLhNKr1B7bGi/\nxAfsK8cBPj6dSZ/Kjr8kSZobx5ehhCzJL/tEiTQiX2Q58H84thzGPGKxmLn1\nc6kDd1X+7++0lb7955Q25b3GF5jCR2O0jF09HHUY7eSqbElV5iJs9g5ntZsb\n9V8HUZzDN5X/1nSk/MppwFUI8YEAxBfSjvZlw+EW+7KEPB/UMDmAOrFXdMr2\ngbNnjUCkGQKZVXzClMMAWi/SCL2s76kjdsEDOOYj20j7DBETTlzoG++qgxD+\n2/IxyBVMCdIjCjLdB7b40JAm7RlIAK7j1LCQIweW1+MOELq477RXVqp85Rbt\nKfgB\r\n=/4iU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCspqPKVQjoB+quQ8xv9VX5e8Xtp+QN5IpD9nWFtEmmYgIhAIIHxVPsPdMoiuWPS9moGsJIAo07oC0AEIqLGGkPMVZ0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0c6908fd.0_1613093093166_0.1921158809797261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-button","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.f1f34ee0.0","@material/mwc-ripple":"0.21.0-canary.f1f34ee0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.71fe9a067.0","@material/elevation":"=11.0.0-canary.71fe9a067.0","@material/ripple":"=11.0.0-canary.71fe9a067.0","@material/shape":"=11.0.0-canary.71fe9a067.0","@material/theme":"=11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-apWL/TP6lCD0SGfpUwtFKLj6cvbTnW/7b4jpIOEusbfT+qaXUOr0zAZltSxa864y17qlSJLDGpeK3TadV40iAw==","shasum":"2670787085b5a45d66581a276dcd4c96471ff584","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.f1f34ee0.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuJ6CRA9TVsSAnZWagAAEYgQAJ5BFlocgV7j7UUPNmcd\nC8Crm7mtgaGmLZ0iqLqzFs9weExvBslypp0S3EoMV1b/QTJd+RzchpOzFphx\nIhws53n49anlSB/jhFrwm78f9QIeBUKPPd9DHVymOwn/K9LHqZVxMqJiwmJn\nh2zTKeyz+Tr5XkQ8Edf789THoPZlJM1oh4jltbiwTrjtDGwcKvBSjL7lwC0P\nQyYBsonyq965IpL5zCsBkOqRyAb+GgN+lKb34pZFWD5wCdy1TBrmv2/bH6s0\n/z3wnhD8z/uKzRsnUGvdJf3oqWZh1XZhZyVDo+pAIzeJWwlPgcuk6MLrHbia\nogD4TxtraSSEP8RmTuYR8XIxYchuIqaAqYmLjXRlu8yrKLANpxYhleBGDdfH\n3L50KBHNKpZKxFFtF7raHGRgAP/JhuIUpb2a8gkbfMaVbJAElhk2WgVfbYXb\nxZJ1JsEltbIbWLBolpbIOUA/4gst1yRpPbR0i4WbEEs4tdwWvQZeAyoDmuch\nCdWmWF25YWuNrhQjj4HG5wq00YIvUaYwRwxBMk3k/fIkPy2Fj8cvFcSnwEQU\nzLy8CrO25AOLK1AwDdd0OWtXcG5g/L2/7M2EIqgPvVteQ5lRyGDqddrO7b1g\niCwXl0gSaTZiRiYYzLXB3HgMAf3qpwh7Z8yf19j7AGf3Z/6xEmYPzo2rkwM1\nxeAj\r\n=Q0OF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBZMbH0L4PUBC+1+43A09dwiHV4euss+h8r0lpstnxx6AiEAnDOIE7oZGr/ZMBXzp5hv5G96Bgk5IazVuZbsv0r0Knk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.f1f34ee0.0_1613161082179_0.04405166086737444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-button","version":"0.21.0-canary.d84df029.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.d84df029.0","@material/mwc-ripple":"0.21.0-canary.d84df029.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0fd56a86b.0","@material/elevation":"=11.0.0-canary.0fd56a86b.0","@material/ripple":"=11.0.0-canary.0fd56a86b.0","@material/shape":"=11.0.0-canary.0fd56a86b.0","@material/theme":"=11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-5qV1hfgfH/8yEw2mvEkCYwrbnRTxYcO4z5Trr0JhOMUjU/Aje45W/CuoSOd8EXLcru5H76ajLLTdMUfQlAW/0A==","shasum":"cd95657cabd324374af063107bf116ef45ac50d0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.d84df029.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBgVCRA9TVsSAnZWagAAshMP/1SEzbPrGx7hz+J1aELN\n5j94etMPlKeZflg4VZGb86YIiZ7CXDUrC5811Rk1zA6PLBQTCmU1g5+zHiAQ\n9JI/ofl4actSp5CnztYkKG7dUQ5Z+dzth/H/cuG2Xgypfd0eFZgUmx++GUNW\n7iq82s9rdh+g/grO4I98oUbRxvM43nopRpzzc1ScqrBQMGuqxKo+SyKopA1n\n2YfE1zPA85bjt/IDe3Zc1V8zQ7KCFiEWnuiyVkgi5mSjaape9MUf494y1t4N\nNJv4YGzAF32uCjm2B2Wj7j9H0wl5Y+fAVUWcf7APq5y3NzwHvZdOcgsnDaQR\nDa7G8WlUhZBvdycf3DCfTOdo5JLbt2qHz3o6DlPKle5y0KSn5ET/KfOkgDKo\nIKQyNBEmWBhClzuqgu1gQZE78dmvlewd6svXKA9+OLPkMmlmwbJAEyAjsxAD\nIRC06sfh7JHzqa/AaoVPZFp+hM4/SZkM/DPD12kykBZ7F5rCfY6h49j6CAPM\nutuaOgOY+TH2K25FZdiBZfwO0+c8ZaSnFxK4l4un56SrO53t2so0QCc9h30M\nPJoDmjYLNnJYhyA8mK/qaTBmvOEI6wPI9pc50+Y8aYodku9FR/JyH/8NjXox\nBgZWxIqUtThH+GDE4o2eJ8+dMpGhsMwM8n8yyAAl05vtiLOKNAZENFmL6wyk\nxRja\r\n=yO2J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLCqM79HFKDN3W3qwRnATDwdqkiaTaFcfHh9YerxILhwIgd/zNBtxhv0AuUskiWSkOBNc36n+iUxdpkCaug7oXxew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.d84df029.0_1613502484627_0.5273654457514236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-button","version":"0.21.0-canary.c525f471.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.c525f471.0","@material/mwc-ripple":"0.21.0-canary.c525f471.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.f9cac96cc.0","@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","@material/shape":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-s8sUs7KsnWxETOEvR3wnV5nQDQZ5TlgdQJPqCQVKYr4O5qjszWmX6xaieKx/q7IzeTLPHgT33Q72tddWXf6OuQ==","shasum":"3e5f536f5017e1ef7ba0964b6babc8c5e43e5439","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.c525f471.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJICRA9TVsSAnZWagAAO1QP/Agg3G84njcUJon97flo\nUS4DsfQ6xxwluQK/vwnXpg9IbCIAUv/OPoL4Hk6vurZ1WOJWNE1r/0JoeH2C\nSVYQKVMfWcHyjwpzHRiXUElcbpNb6qmaSba8JwO8a8H0tLG5IB08tvdqs/iB\n/1LKRk2w2X3nLkmFF60T1OgUMX2KAL1EgoP8HE978kCbgZOvyWh/7B00XOjy\no/OE9Dw3vTsYdTZJ8fHzsGYZx5XMplwVgPB4JITqv78R2+pUHad6uS92YF5E\n/OYDpdD3W5Ga5s3pQJlU7I8F4dSwopUWIKxiG3rRaanDCleiw7v85zT1Es+F\nB2FLkCVN2f6N+oj6i6aQbrKC1BYccbDurArSdXUL+qarZ0Vz7YhcJeYG+MkY\n0e3/uGtkuXvprDB9TR0oLvoULOwnY7L4fwgIV9JZm8KKzmpIgC8qlM0++2cM\nuk3NDEBsR2XVhYxAY7dQ3L0vK1SW7ficQ1ZEbfJGqaor9LIzRjs3rmCAsVpb\nkiQerontiqvZyf2AjOYUHiHrPbIjHQyhA3ity23Kup9+C7e4LLrGgBC492e1\n4WahYCpDNgZMYL7eHbZxSP4QPlV+Em/vIemY0iVWQNqs1qljlBfaAbh57Ren\n0lKmr6oaieCPXuUlypBLPrv/p/zB1DcjqEDCAO6X2oe2BJu3Ara2FTAqySsp\nEwK9\r\n=6LAh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCszXResJoiOoCe87sHMJssYuAo1wbWpk5AeuPy8Ol4BwIgdHFQnws4sGhVlrPYwQB89NM3YB4DMWJZgM76xuI473A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.c525f471.0_1613595207990_0.6107973742053028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-button","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.ba7a1b35.0","@material/mwc-ripple":"0.21.0-canary.ba7a1b35.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.f9cac96cc.0","@material/elevation":"=11.0.0-canary.f9cac96cc.0","@material/ripple":"=11.0.0-canary.f9cac96cc.0","@material/shape":"=11.0.0-canary.f9cac96cc.0","@material/theme":"=11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-keK0nOg3FWVaC1wJb0nogsyBYbT3oisA5iajLm1LJJeWuEx49vM7tzZ4B/pWHk80G0YKVqV69yuAkfy7e1KuMg==","shasum":"3804ab348da9723b4ae7bf91a4584e20b19583de","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.ba7a1b35.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLCCRA9TVsSAnZWagAAMJEP/Az6cxszDPqqAgGUFxkl\nMJByy5CxjKt6qEPf9NGuibBXOnSk/RY/5+lUP5lkthXcp6SMmGl/CUF15DY4\nhebVUDUSONrRzOOTRxuhemsgAJzVVOBQR97YRY3bfkySNqqY72rpsVlDZJHk\nPJo3U5q0mkanIlBVgOqai9DTou9TOvGNQB3E+tVFS0UAoHQ34I6bo08b+/Lv\nZNA+kGPp/GmhPl5QOdAiReXSPfyW+Sx4Ijaj4Sn9VPPbj+X6tjJuOT3/P8aq\nnNu3s3XdO8f5hPfF9q9hOkEaCMAHxkxyROuIjvB2d3T9NsTjle8OLYlert8z\nvBU0LsO4Y6nVMmCnPVcr1WU3eB380FS7vTXUbQcLOrMUfkniDzSnf2r/PNfu\nnP3Uxi0t1ta+4xjbZ6PO+QuEM5lytBhWT0lIycK5HdAHkZdyoUSB9cTSF8f7\nOZPANmirTNmqMTvPgwjt7KdF5ixntHzG+kVoDa8yHm1jIFoUB3oAJRyi9yCn\nQJw/yIZQ8YGZ49H+MOFn2iK/AhaOanqbx5EDPFo/vtHRiBlqQTeWBTYRvt+X\n+dd5H9jffO0aUW4wO34AacEICd9xh/2FNGQk8sIInucc7+b1ZKHuy6zLovJv\n6v5TZYybkd8KvSHjSi+bplSHOGgeDauKJsrt0sKozlEsq/qZtFSIJjAMNxwi\nsP6c\r\n=lf1i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkcemZHQRzV5XkRVeP2RcOXU91AsZUIldmKC8ftzK2rwIhAK8sbaJ/CWJTxKOPcYP3GzD/gRwAQKDECYouceEP7eX/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.ba7a1b35.0_1613693634372_0.470495608956228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-button","version":"0.21.0-canary.9a566dda.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.9a566dda.0","@material/mwc-ripple":"0.21.0-canary.9a566dda.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-lfzk2D1hPcLIhdMlPnFMROzAnz0cIrSr3CTdKuwM3Ge1+feg6bq9Qgtx+YjWDOR2sdpL38tqfmi9JXFpquLbDA==","shasum":"a54f0e7b334881455a71b11833842a18b9154a56","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.9a566dda.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWKCRA9TVsSAnZWagAAdVgP/RSSZgMGjeq6HcWNJ6od\n7LpIT6e72VvATbVNi2vKhLoTai+dxPsH7rJ2NuBhjzLghhE5WruIEgt5P7bg\n67kddcwrlRlo4sJHOZZfV4TfUN2eycbE8/FntD3O34Q/Q1LMzWUOFGp+vBmN\nw5a5o0OJY00HhwkStRmGb26z7wpDf6qNZMHJMxjHliOvTVVuCBoEO3ppTFE3\n01QH9lvsYcjAyaFpdR7yTz/ld6qspvsBFa/+9CbmgkH9QVEGjgO5eFu7ImxH\n0Li30Dkebqj29Vkk+STggaPm6NVLLP2QYdmZlBvCCBUIb0yBLTQjRZx+c+/D\nxELv0N1fkgYUegOZx0BZ6BflAMAvjQSc/axtIAfA/4Z1w3bn9o0lV/SbwZ4Q\nfy6Rbi7m3+U4pXm6GIyX2KpoedNRC8rMhUT6oFmK8BbwaT2dZK3C5dqZYUTM\nPOSqDawZ4tqJKma2jj37lfK1wkATTNOQNeCcQr9zP/SAUWw5wA7FTZ0vKEF5\njt6R+7FC5Clq8tkxO1N3A05uZ71pZqDdVz7EuZSCeCAgay5iHqgq8Mhj/kZB\nEB1d9LnAkpOWWHyixwq4xLevn7aCe+y21oQVu3kbvIpMmMNzwGDwa6H/DL3E\nBVOi0GnBYA+0jFTdRCraZO4iP+svIaP4ONMlwr8RLx/84ddGjcPxc++j9LAb\nNGG2\r\n=GoM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9lhFqqmkQj37LqRtq7kjSF76G/1G9/pfrA1zXgy/dMAIgXgrOjn4vqk7HFaQ7LWCBsxSGgbaiRq8Gb1FqZdzw5Sw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.9a566dda.0_1613759881555_0.39896847589791506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-button","version":"0.21.0-canary.55addb8c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.55addb8c.0","@material/mwc-ripple":"0.21.0-canary.55addb8c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Q9uQkyHpmSOsgUTUXI9KWWauyekQJHieEFExew4Ky64NNxBC51KZENxTdFYbu2BhXhjfiPdy+KrM/Yti9wmxgQ==","shasum":"ef421a3e8474df12c2e4327a5aa1a09a223aeee2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.55addb8c.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDVnCRA9TVsSAnZWagAA28AP+wYQBBRPBxvOg6Wr5rku\nckXry97pojmNXbSlBjv0LNk0/tN6OeDgAt2K13yZLH32k6WV3BjSvleQeded\nfiDENIjhojjW5WL1NFse3tTeLAxB06fdHQy4Ayn//JCDcSIDyV+kClQtOpUA\ng3x5tjlbUx37N6islwmzQ2ibBTpx8m3buvY4H+6hy/b90cuOZs81KoYDu36x\nuNt5LPXZSOqpJplFbNd4TCETl1EYsfEZIY7NnjaBH8jpIbn0REhuKIWQ0wQ0\naqGs7La1GI3Hp6J+21ISRtOHv4UpJtOp7beOtuycH/4zGDz7+xVDN8o7ynCK\n5Xvz03Fu3eyWwO04eBcMo59WCKRfmsPSYzsT0lX1Zh8mdZxzsvykE2kVDy5m\nN3qjphhR+e6ezlgRGa879Dm7rv93fwkTlUHJinKtm55VSGlAyLvvqI6HLu+p\neX+sFqHsPAxRmGvMvoCet5Q80BJ/sxnxmX9SImIN3vDqZikQU+/hN04uaDZH\nuI5yOYRPshtBTTnBXLwXJQxXcHrCR4522Zi0K/yMngxAgYBiiN2G3hGzP2/T\nlFA24vqQopx75UgKrHgrjl042E2sZzGDW8SkhB6ZafvvYetBaorf6t6Z+5Hg\nDeJzyh3VmgY3xLG4mil7VcVJxrf4JDbE2jcby6G38921lOJlTiex+eooDPJx\n4Fvi\r\n=0HWE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT8+qj4tSxE17/vl93CYJCyFqq0ZrTjr9amubnAZNLDwIhAN3z5H85qpD93rOU2G+E1gnoxbpJAV40i36ztyzSO10p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.55addb8c.0_1613772135287_0.5541051856047399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.85dd5e9b.0","@material/mwc-ripple":"0.21.0-canary.85dd5e9b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ZptejAI//XcP3ub6Z+ERn8WKRC+1vjsAv/DDSH/iW5BvNqhuXVk1R9pj2lqjD4eoC+HxeCJGnb1NmrotrheG2g==","shasum":"ce844ffab6172cb161c6539ea141f28122d960b9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.85dd5e9b.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGYkCRA9TVsSAnZWagAAam8P/1Tj1LHohBt6YfYnF0RZ\nveMMUQlFPWuU4xlNjK9xIHYLqzoucH4z52/UeWIouSFKYLR66MBwrWCMGpbx\ndBl2dcShenumtuFP7WxW0Fk+jfhqPOqutGd9+Ht7Kq20VnKOCBrom9Iem91l\njF+yI+xq6HXJUPXEQY1Pqy70vKe3bIKcSiVqi2z+wbFGoFJk3jld3zBJm3/N\nulkrP4mZBjVzsAgqocP8LKcG+mGnPX16YZyL60S13QKBP0iqYgz9eLWN2/5b\n2uVPnb1IofNP6FbEP/IENglvGWyWioMZDSCx/5vG5zBUPVPuiGHp5m64SvgB\nU2+z7wmHnr7CnMAW+BOcglCPeo78rr7Jclaoywr6X26W/CkC0JCeGzXA9Xe3\nWpsQWVOpmb9GmIIUiR01bD4Cmf01Y96n+CjDeOi2VVJvfo+EX0tNO2ImEoCD\n8xANE909afuVBOv+iUTxni8ocYTsdWunBftKV2hvpkCQ0sdgcQ+F6rtWClmt\nmDV9cjQbTRhWit3UW386vsg9XiG0HOKTQUDwCQKh0tXC/k9doEC6H4xuAxdu\nNwMtDe/UWcWN4rR0AEoc3iv5NHYytE5jUcyxdFis1tuaLzoKnQslw23weRWn\nVLp3cs39fRIDaAWdn7Lfvi1dYaAO0psFN673ALhK1o2UdZwft259ADs/BKtO\nNBiU\r\n=KWB+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW/PvKVA63FZTkDV8iGtkczppdX7ikPJIoVNb9Cw9tpgIhANGExNh3RXwfnU0sGrv30EkUxidn8j5yMZu+MJPobxb5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.85dd5e9b.0_1614046755933_0.3745851797723072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.aa3e078e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.aa3e078e.0","@material/mwc-ripple":"0.21.0-canary.aa3e078e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-A1JhnqRWjQK8F6fMeljwvgK0Vmfaimd/4Rat4s0PSZcGtLqndqq/D++vMU91qa95Y1swoGeCGKsQ0nhC4x4keQ==","shasum":"b3b2b17ac5615d578e6d40132a11a80d39ce8025","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.aa3e078e.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgUCRA9TVsSAnZWagAAjdMP/3SCrpDC3KthMtDz1ONH\nLL6L7EiF2MMIW/9+ySVuuu6/j+DKNzlPLKWpn/tYX6VuTug43yjxay/mwC6M\n/f8/bI4B2oL6phXlmvitLGYXBl4nHnw2RkiB7oCE5IA3gwqb/wHy3sEBQONR\nTg0N+a8imV/TmcLOLvUK1+ciMTjRgtNyHV5/sVdFkW2EbXUvNCFHb64gZgjb\nFN0tIDZVt3nZ5DOwPg57icVuGv9l7aEhjSjcap4kEpVFBcUoFbXp2Y9JTOfM\n82r9Ha8k4yhbJ0czEC1e0eG0N/72INcDJ0Xor6Y8Zw4BAdb0HCXrEHXUm62l\ndhdY7vMKYlrQFNB+2hWiDATVUS2JQQ5iSR1m1PboP2m212fbG3eObcJWJt7j\nerJJGPVDiJAUye67QOJNAPmaQ7XBWa1uLhv1P+dyWDIx47KipG5VsXekHrYA\nL79EzguRJZOKpX6wL4prS5tP88xnjicNJG5LmEede94AMsjVWpky1kNaFnOk\ngKz3kPxV9H/4MMGwnxJveU9gAF+RXGf7/M6GrYiJSYV517Au5AHcYxjWUTLJ\nDDbzWPGV+v7IKqGiuwFJLufR9OLOCjLg6Ee+WTCCOCXV9MjrGoeE97h+yJkP\ncSut4dW8Sif0Ykwj89dNs8QhdNigb72ANgpUv4esaxzKr3g5mFEo4jSV7igq\nCnUO\r\n=ocgp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpFHEmWuJopKgrcKrfyIidJhDe3+JgFgdZMfFXX5mEsgIgNU2Mrqk+N91Mjh1WcgucidOOYoUfHXKTv+U+M+O+a2A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.aa3e078e.0_1614100500097_0.9714609253565114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.dccd254e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.dccd254e.0","@material/mwc-ripple":"0.21.0-canary.dccd254e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-JpQsrMxCj7elRpoQPK7L9qxY55/2X38xtBzTVGdstSfmAm8Dk00LrdU2XEf05EUeB+rAkO08hxlxHVOkb69dTg==","shasum":"4080342e2066f4a81084b431eb0d50d24931971b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.dccd254e.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWO1CRA9TVsSAnZWagAAXWoQAI+u8iopL3szYC9USb0A\nZmQf7cCDF19IwZpfONGfrPMvYsiZ98BFcSqHo4F2wr8LuQgLLh9FbRvvS3aS\n6t5jywOhbk5Jy5C5DAsCaWlph/9lsmoaNOm40rH2MNW4Iih1o28HkKfSS2HX\n4jrNuV4ADLRcarPqp9rKLwm0ldCUQqOHCZl/Qm+4qQVsiC5XysX8dt11bYQF\nhkgdUIc8o4hYr2eqlD6u9c+rAXrz7b+4CbTdKJM5ZEP5c5Xu/La88gLzv6ww\nGIrxV399XZBwzcx4Of1oUJNSBICv83G8aKRMjKKsxaUF4OPa6vQiPcKc531w\n9RTSmSVRm6DWI1NHjJ8yQMvYw7FIrOsxVfrOdRknz2WpRHWB6urxpUqwiWi/\n92hu0aJ+whWatM7CMdH5Xlg00yI3WRkaOIT0EwRUl+VGSMEnAIP7KmVU3QuD\nIzgxPQSCJnJnMobmzBEAo/4sBcaRuV/KHsPV46iMrMWhcwcBa/mM5H2D5Phj\nBhUwLvDZh77rIlrAVSei2Dyx7dFtkgUCxj9gDlNgadK3MGFSze1dHVninQ6x\n/foOStSsoHOup2jI7P6bOpD/XC7Oi+t4TlOHN1bhozNPClqJpRDcBCJOs7sd\nLvHISUzbZEKUUBaCtMhBDuiCodW7sdosyqBcR8wO9nPt3Tl7g0ZJbdgxH1wz\naLy4\r\n=SCKt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPsaOJ/oSoFBU5n2hJYuLWgCh/fBHHO/EEz+DB9ql+ggIgBIY3pXOo/nem7fshWlMFWJAwF7wZQvWM92jXBlleKPM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.dccd254e.0_1614373812679_0.35389063045426683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-button","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.7dd1a27d.0","@material/mwc-ripple":"0.21.0-canary.7dd1a27d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-UADwwcqKYfT1203tPQEn4COMXjaYKmBiv6cT4YOqOdGfxzAxch4+r8Lb2d51LxGPoixWhSqLXPdeh6dbF40n9g==","shasum":"aa1d5f6e142cbc398a7a11df167e7cf8e2f06809","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.7dd1a27d.0.tgz","fileCount":20,"unpackedSize":84781,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQkCRA9TVsSAnZWagAA5kcQAISvk0DZQfV6ZFD6W5UF\nQzTsn3JseCtworwq4WSJq0K0m5Br6s1BsBgmxkCjbxdv4ILJzdRle2Mcw4V0\niropOoPYcMVRAPHb6rwe5zsl+0UpjiyODoZ7/+Hxper7WlyNjjJ0e0Dcjo7d\naW2il6e9VdLpda7OgblD1pRBu9eAQf7NhIwPuhmIYMuVdzo+1H1HZwK4r6L1\naMKfeIAh7O/Td+Sg4WsqzQh69qjfPgrmSTli6EtL39PYE3ZhsMMXE16eefy6\nFHXX/chW6JAFBesU+EdQKH6zkvqcd9ABQmkQzIIFS9nXhK3U4eYFnzFp/bx2\nVODsBhJbXFXB/KH0kCqFIzmNNj3ReAwpECFnUI5oeE4ZhcANKcCKwBFYiIoC\n698d8Z39e58fyUW4NNJEykv2Q2skqajcjctG+EdgV6PtoGDSRDAJprLumhoU\nZ7tWtY8nhI668BBQD5WtSwmiqLFwkh/UDTU2hu60fwVYnWmoTWA9+SOzVh5f\nZ0/nUQbAb2R69uRT0iUpxnCRZdoaoTVfyiOlsWIq2KwUbJibJ3gKWSQuZnHN\nmsP2CwxOHqT0pTQUyEODwUXl/5gwamT9afnzQmg66CQr/xmJdOMIEH10YFKY\niCetiik4mcu5koKev5uJuWSN1YpJ+8OphJJ2LdF+LHtTGQgkV1HHR2zuFbG1\nnqyI\r\n=o8Hd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRPcx7bREvSgpu8XypIkCHvdSTSeXtc26r5xgsOXjDSwIgXuAMwcKVuSdBoPlN+RjTQXTDR8SXunxmclYcPGbMPlo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.7dd1a27d.0_1614636067695_0.43674838168759633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-button","version":"0.21.0-canary.12574572.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.12574572.0","@material/mwc-ripple":"0.21.0-canary.12574572.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-UFf/VGC/g00NKNI4Wq+Dqt6AX1NIQhDQlzfcg27XcZAwziN737BiStdnHW68AUcBqpWycBf9OIcdHQlhuCqmEQ==","shasum":"c400f87d4f6cec1971c0787bea8f6d43b52249a6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.12574572.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqAmCRA9TVsSAnZWagAAzFgP/3lVv4EqBtTl7inswBfX\n53lG03Pu/7SlfpuMBJoEU/zcICvlYdjQlANyVv5i3Ctm8lHCF5DcAaE1gASs\nQiEnpviNbDBsngitVO+IfJcdiLUhRUeTfVovm6LoVi5BRdvWdnWcO2HSMxAz\nIultdwz/1Cz/4vRN3hCk605oh/QZzvmExGkEdIXIhgwynmxShzXJLq5F3DnG\nxLgjzEnF4lqTi7QJesYFD3R9syzvzU5FLpTDhGlpDYKOpUDw8cP+WOAemUcv\n6ubvahzPjmg0OZDC6c1mOmScf1QBffMaJ+6eUK4//MPn7EkAKRcHADJB65Ol\n4/Z3MYXAiF7YSAGD/VQgQUlsVKeLUBfpBTRg0lf9AapF3GPAAWEFvET1TQxE\nmn6JdLwvNq4y3mwhvj1E1+DDF772EQ/lO0KRmGWoTY3Jzr2iZpOIP8Ka0yOf\nTUzx1zxqeWISMNwHJAgY/LnHCm2AQkyUraRs/ok4ICwaNUrJmKcorTORTmUq\n8IxBN2PtIZC/wRQ+iZf6lD72kilPJ0nCCZ8c2uSIDabYjeX0nQs9b1+bIcVD\nP/OfE44TpjeJUxAHrQDO7zb+eSAykb11vz9rOHkUyndiVwNRFhjcWK0myJV2\naB2mmWwq8b0aXUKiXMQTVVTWN+X5ir6B1z6uaW22mvLLvLFJspmjwC1lJcwP\nANdO\r\n=Sycq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkjEYr2xu05de0DH36jwq2XV9UEOuO6fmpAhovTpk1bwIgVi2Gx2hbzNp+7HFTZQ9XfE21Ct+JTbzEZUcD8gSrk7U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.12574572.0_1614716965893_0.3102295904262131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-button","version":"0.21.0-canary.1109a3d3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.1109a3d3.0","@material/mwc-ripple":"0.21.0-canary.1109a3d3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-G+aCLwg1ARtJp0NhX4yLlZvAz2yQHBhG5wR+xow7lDF0aAu7IbRDqZMHileQsTNR2uIO7CGkPgZzSverfuaVOw==","shasum":"1c0c927fbd85d801035a203e6b74f96433bfc924","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.1109a3d3.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqFlCRA9TVsSAnZWagAA79EP/0XUNxkk7S8d18PgXH8Q\nEw2M3ohoOMd553QAeG47O5f1uacfKd2m+aGIzSoOho2k2GOIlJtBd1YAaVTH\nZ31ILHRc3JqJDVZogQXDHz9aemM4CBzbKHAiG7z/p7U8dLUHj5VpXmfUjLsV\nXeHIF+jgv3ye84oiw+NpyjtyhEiTBcFAzFFLgmes57nqKabeEByPMZIs25pj\ngR837cczolqH2rqBS826Sxg3vkPL/OiEnERIZbBZbAwqc4Vv8haN9uz2UC9Q\nnfsUpEGM7sC+b+zo+w1JTcnYhd1SZKMZRbaaR7pb2AwHIJ4rf2jPBURtnHpP\nF+9PdieYLjQAaZrarCUbvlgxLnt60VG00EHUQjLBuYhwaZs6yQCe8AOTFAm4\nSxUfpav/wl+cicO7GLHiONlrY5U+ipARVrTeQ64SsUAefme5uDp1gxMTqpB/\nnygIOhsP29NFhrvrQM/QHueLznlh9B4X0muVhVy4FXwc+j8yuhSNZts02Jaa\nysmVv5R7CYlgvWHEC4AZoo0UWYWdIjUtizUaSyWGRQDcrJWHTWN9F5kZJgqv\nkB1AzNmKYx0GgKDYE9RyqsdbBAU9IuY4oaX9OonD3Gf6JwOpe8DAIeTqvymy\n89g2YDH5Ag4aLJVtMe2MnvSJE4ZP+QZCroyWrf7qzitfGMcOop9XNGMyz7o/\nxgVJ\r\n=dl+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4hvuczemoEtdZwcdOlyrCwpebz8hydpPDEY7WPO0gDQIhAMK51gEvMaHvS1UkG4KmuZYX6FtCRL9ahSaHaYPzI8zq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.1109a3d3.0_1614717284860_0.892780869179673"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b9cd8739.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b9cd8739.0","@material/mwc-ripple":"0.21.0-canary.b9cd8739.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-2OPOerGL+eZF7OiWjzaeTEbGB3GM80rHvMSiZU1fzBWkB1jD9a7f6j4JZJoWommHidlPRebmDSXsRCXItwhpcw==","shasum":"654094cdd80a3ae556a346c30db139705b2d16c8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b9cd8739.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8u0CRA9TVsSAnZWagAAO80P/RLmWTWwkX2//+DKelFE\nR7bSBTI67vO7IzQF5fYl9U9m2cd/G4odiRhG9fj4X3GBON67Atw1lSOdDeVc\ny+ol6qRMkP1K9RRsEP9H4nXxWwOwMIITXwKg7+oAek636vzQaP3s8pIOZmfD\nSE4T3eRIZmpsK2wwTAtp3n9WdOyOchqSNlut2r01Wo0Bk5HSB1Wv+4ZK+Koc\nl7n9SBGwLCVDMGmaoEobxX3h/nWtj0dPg/JtZHZPEUJsMTiQY3GBGGvDI6Ng\nnkt0iQ1tdy/1m0nAUhT5AWQbt5gMwGM7xLMnBytk5HV01iZI/MgnnP3IqJAI\nudr7miCHnQDddXzz4dGf43i4ZhEasWoz7mhQUzcLIcRtDnh2QiAuiTNHn7zv\nS/BGkYGtpwyyK/OTygNRB0nyX/9DIVWg5temWfPeJBo+VLkXQ35r1RgoKb+X\n6Rhy7AhzLtfrfyVPaAQ07z6vxjr4aKD9X17yPc+rEF1MNjaQzFIkdU4i8oN/\nKid4DP6IqPeDrQMrH5RWtYAb0hNzAiDF5VzAmSi+oQhxLFDoZ3ArcGeQUo3o\nGatffTydtUGfWZbD88UVQHpU7OO3SQ0CZE8zqy81ifdh1b0rtKtcjLfjBus4\nVGOT4+aiRCjNc6n77j3PrMp3hhE4GjKllXwfTOl2sOZBe0PTLTzFCQXDJRNw\nUB14\r\n=itVJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCU7j2VRiZxumbYzJYl2PZriVNUK9DjBP+UrVhdCXECngIhAMNiwfVbfaTtCVzY1OmVC0q1jyIfmamo6T1a4GPMKUud"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b9cd8739.0_1614793652133_0.027134590056612007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-button","version":"0.21.0-canary.71ee796a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.71ee796a.0","@material/mwc-ripple":"0.21.0-canary.71ee796a.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.0b4a4b2eb.0","@material/elevation":"=11.0.0-canary.0b4a4b2eb.0","@material/ripple":"=11.0.0-canary.0b4a4b2eb.0","@material/shape":"=11.0.0-canary.0b4a4b2eb.0","@material/theme":"=11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-vLaxbVYdLTGLWBz9hDriepCXEoSYsduESlsLRCtUlAX/SrkmlbsNJXTbnqdlnNLOVskRqk6HsjoymE5MiPhb4A==","shasum":"778fe4acc001bf06bd024abd2e5d6da04acf8245","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.71ee796a.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1YCRA9TVsSAnZWagAAFngP/iGiHZIriZZ9WQ1OHENl\nFfxI9tk1Lk5wRNec8uJRk11nB8PUCDraFDfVP0mDiiV1jUAdJNfDIkGdt1S+\nIltRSO3MqdP+4Yb/EkGpQNlI9MlDKR/eFOHxM9lwNhplc2VzIVSbXuH64iRj\nRFCGw5T+oz95ecYtURrR3WX8dWPU2oaiex3WpAN6uTs1DaQmOUwt47HjOdWp\nWidaMI/LZtVmY1GOXLA610mYAPUSnJJUTLCAB+uldrxoQqSI5SKdEBhoySIo\ntyrHR1CHHIZXVBzoJzbkbFoyLnOocYLnb14pfr+JFp/yXSdYXW2IdOMmhX1g\nvrC6YKthb9NH4NTK3N53n/bkRr6yMkSZRghTZc21mRG4V7KmOu/0mOmTT/pt\nUBSv/2QbUqjvJ0kfw5rb9dj2MYA9NsqHW3g3RrEUxvzBsmeqMNRf9VKkP2Rn\nLs++via//zNirSFocuwvSI1WZvK7ztYMIrpNRHpY3kK9jIQeFiKJqiQpX/7+\nFSmrn00uABmydaHdPMWGuzv0H5oT/dt2LtOSFeRGC5/1t4C9sLFuWqh5Kmjw\njIn5hFPiZQxRq9P9DK9z2BtgC5RVk2299IwzR08XKvay6SInhcnjhdeGuw6U\nXuCG7cm2PjfhnFp5NTf6D2t7SWmBuhvVEUUoOY3wTEGh/ziN4iVrbWqtwezH\nAR7F\r\n=Cq2A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUwQbndOVNQ8huCvpB49u10iyZtGBWOkmfLXowAY8MSwIgUtTZrVIxy4K1BDp04DA9FYpFN9Mmh6q073XjVl4kE+0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.71ee796a.0_1614802263697_0.31738379983730436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-button","version":"0.21.0-canary.2be191ed.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.2be191ed.0","@material/mwc-ripple":"0.21.0-canary.2be191ed.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-jPeG0tqe3HpFl/+Ms7o34hfEBxqR4HSB/YxGHQgC8LwI1dW7g+t+nBj8ONF94ONKY292nrElray38Vr1vCVFCQ==","shasum":"b8d3e557a026d9fab9f83c4274cb1b008970ee0c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.2be191ed.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQATpCRA9TVsSAnZWagAAfnkP/34/c1pIEHk/hWYLgNZW\nkF+px9Qa49hE7FmdpgtfsGayoPXMOti6hNm6yzB9/Jwrc6eV/49jxlHr/I+G\nOEOqzSmlAVUn0ZrF+hCrNWcxHOGUbgdWPyRrYTByxLDc1OBvuRQHiYglj0lE\n1jCPJnH5l2C2I1bO6xIXzcyF53n2GJgOEElUvFw5hUvet+k8l29BNAelTwDa\nDLz4xy10SkZTkAx1fSm/62eKZxFVWQ5y2zFt5CRiytBM79lcbV+9GAY03BZ6\n/I4AdXf3rGfolJHTeVVsBNFuynF04jVqeUEPAibPo2uXwbNvmzfGWYIWFBic\nJz4rL4CIap/iwFttNRek1+u3VvC6jWg7q4uDFcqnp1HsaMcfncp7eoQ4PUra\nYupP5wuCwtARWxZ15TMBM8J7rMf6uC1iNCj9aR60b4qlzy1zo6W6vCbKA9gw\n8xgn6pC2RNCB5SsapcbMdg4I9YJv1Ja9kN681kwgiVkyuSSJ2WfGf8H+3s8C\nC3LrtBDv145XdDGigQzTbq4TnCs2CrloWXQI+GOvZdOBH4JVeP1o07z3HehB\nrbodaAGasDUV2LbJkGVn6f9iqa1e2EDpFY3wO9LCMkurqI3l8TgFD8UbwgoO\nZ+R7/IfPu2FowE8LFYSmYiVX6yzDap8extjRj0ue80aRxJ5VDLbj24xlAq8B\n0iK4\r\n=+pGO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE352EQj2TT1NZEqhE2sdnwcYMhay4bQDKYLeE/XpU4LAiEAiNI++dCzi3qpmXl0+lLEf5RgVcM7zRzccJlaWltk1G8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.2be191ed.0_1614808297301_0.38953808667440293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-button","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.6dc7b06f.0","@material/mwc-ripple":"0.21.0-canary.6dc7b06f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ma4SWFzCI5ZwNP9AArT8/sVThzu7Ve73OWLwGzOSmGrG7PTIL626Y+XElhr/kQhUfAlJA6NaZU4aBL04lo0eqw==","shasum":"71fb45e841d2c0c5ae3e8e86863818aad8968561","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.6dc7b06f.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXm6CRA9TVsSAnZWagAAStsP/jUsQ/3iilcU7rzesBPa\nRMRBSTJuJXB9oRO92AN17KFsNYcnweOTPh1Thk8f8arOwuDrBUoUPhxEu7yD\no6aPxNT2cgQkpp/govJeBtLRzSL2U08gKEWEnftfty6ZgUPBUMTFvW4dPLc0\niuF3RD4OoPg7dqFjl9906oS5SF9+JZB/SUDrR8dEvKWU4ran4natEhdqhlxL\nKRFPETSNwy+3SckaX22J1P9V+blMErz+cPdhbu2XjHjsTjKxl8G5EES6rWH1\n3UTH0frMbs/kvMW29kIo2FQK28H0yfvVC6tpzVOpkuR9tdguqlInOWs07uMv\nzvSHbEZJJ96ggUreZCZ0NPB6GjpjRhT/nm3rISKZ/tOCwkEQMW/DE4nox8ew\nPlC9gFyH15f1wLVaR+t895h8Z4bGQQ6qTqB+IbLZPSrrqXKEgme0/QiE7dse\nKuQAnfo3wBpOdOjP7JlwlpHnBtbm9PYPO1Jk0xw/q54awP9BqS+KjKNHufDT\nDPSiOfiJUYH15Yc3UXibOi+tla7fJ+X8J0sUICacEQ4LTwI+O0Qm45k3bK8B\ncxkLqVC0a1qCSrv+M4KDf9/ONXGvZ7iPmSuScFnbDjqUwraoG9P9Ti4sftw6\n8tF1ywld77MLzdPaLGF5SApoOHU0byOem7XZmiKlnj/c8NqfFsKh4GbhIW/J\nzRrR\r\n=KMet\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRmuBFDMbZOTrLZwOrdW8+F+2TRurSkcFdwSm19OKLYgIgd4hiR/4BQMJwet+mQ2LA3806yBsV6Q95VYhr6yNRu8k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.6dc7b06f.0_1614903738341_0.9305618899140002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-button","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.24fe7ba6.0","@material/mwc-ripple":"0.21.0-canary.24fe7ba6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HlauovoVKzSrkF7QE1EGMC1HqFcXn6KeTcgBvkx4z7DcF2uDDK9HpZIF5JRIssz3VZWbv0VY3KvIw20l7oXzsw==","shasum":"f9c348c52f2d9321febf5236c05e1f5ec9e2b3e9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.24fe7ba6.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmntCRA9TVsSAnZWagAA11MP/0QE5i8+Fr1CxsFxByaE\nNxdxDpVaAn8PLbbEnz3kbZbNOkH4Rv6JC0LwGE5yZlQzxztCQ8UhtV0Dwsmm\nsLn7w782YREY7nfDUcZfpaCDmljsYTAYnCXnRTOd1a562iL4GhV/RTjVEw3x\n+c4sFXHkokrplqx0v7USj/4tubuZ8cQiLQBiJ46yhmJDBCS+45T2yIJJp6B3\noQd6igJfGBHx5PMk9oIprYXTr0g4EVg8Q7rEy/Kxp+pn5VsFemRK4zbsJT07\nlFP/qC85Cch89NGs0ajY/VM4weKt84dluS5gcSI06oaNa3M7U6zGd0FSIzh0\nFlO04OXMhBugbxD0W1GYHEMN9gvLKNLYJ3kPu+xhwuBSa24mlOFobRu6A6PK\n7dGA9/Dg9AjE7Oci84ploscXKWzX7GovC0JBWMHhUxBKymO1YKcu6wQ2i8M5\ndmTJ01F8ybBbmnwhsdIjGx1Jj/0ZGnFxVgjtFUK3wkTUlusGG7brooKlEuvl\nygwJX3p2LMGzWisCe3JLn//k86k4q+UPSk7v91nufQu4mw77YTXWLKuJikmo\nVUyMPucdg4d30ZUI7SmPc97VUIKj8+758EoD7WB9BKVrxD7qBoV6XGa2bstW\njmYBOWpyCr1ompCqAtX5rekBcDV3zUFzaNsfogNHNATOiPESqvtevFK7vvZk\nEtau\r\n=xY0k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7+yL/m2Bguaws3vB9E9ZNU4RgC/ata2X6UwO1TJYG/QIhAKnoo4Hn/Ek59efCG5tB+dYSD+O/PRJdFDhPJgQi3y6W"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.24fe7ba6.0_1614965228595_0.21549183133653438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-button","version":"0.21.0-canary.12c477d1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.12c477d1.0","@material/mwc-ripple":"0.21.0-canary.12c477d1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zn3frJMJwS0Yl/ZiYfBLLYxdostgWwI+KkudSffTcCuICPjPm8sBvLrgzuypnpkkAl6qyuS0awrIQeVuxUEM9g==","shasum":"3bddd53df92d4fc6b083cef28f574fe8ab74bd65","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.12c477d1.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqPjCRA9TVsSAnZWagAA+HUP/3UNymD2hQxnfzDMFYhp\n1VDJXpFB6MIN/loulfAihpFsa5natZ2R/6/VPJWIZxOl9J3qvvIAwS7SqH9X\nIdZYO08S6YIYlyZYMGU7m2itYyX4LV9kfSgUoK4CKRH1z39FsCzg42Uet6az\nBZBYiTdxZqGKbE8PLSH99VQKnDO9x/NU/D2xeKpdN+HfhwxxfpqLWm/GLY5G\nZ1eC9AAhSzVxiYLqCg4DRhiKH1QtvfeKKYxHJ48sRy7tH/4f5jejxAMrpmsB\nkpZjqwV1WBvPvE2aMbKsL1fCobPFqRtQb4T4OH3Zzy4gLpL2wmYwfZ9uyn+I\nVTGshbxwsvu48oBhItXjOgMqdpRLPsPqQl5fKKcJgfsgsLSdESIkAUGdpkMj\ndzXR/RJh6ICLAAS+dcKI+2bWTLmD3hYTMLhZE0qRv8Wm2hkUIAl0H0ovrr6y\nISdbt77SF5kU5NS95GwAR5FW1cL3lW1ZuRPbrUQ/NcUZTa3zO8lZvPcjEpx4\n5fYzZ+HrCNUjOlftEGpyjGlLL/evILmHE4mI1iTwugP/b+cKQi86fySgWqTx\n/ZzYPI9OLA2DsMspeXZ+Bwdsate8YajVyAK6jQx1NgG9mbGAyF/6yoRsc4Ku\n5nBHzrzvcDfZLWFI3xcJCgyu5tAFyw8oLsWBN0dtzzJjfM4llXajaAxlcv+k\n82Ex\r\n=br28\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOXENDgt9qJ5TzvQIZrO8eVQ1tBWcIQ8wo8H49JW+baAiEA+tRrzwsErC9WAN/zwoyPJ/K9cugrWyEiMC60n+8X/iY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.12c477d1.0_1615242210873_0.16672020895859552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-button","version":"0.21.0-canary.4c38f801.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.4c38f801.0","@material/mwc-ripple":"0.21.0-canary.4c38f801.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rpCmNH5t9xfALLucRmm60+LJbS/csM6E4pTif5tZBrSXVoWDE4y2xw75Jy51iw/UmqM/QJsYLQcNvDPAFrj31g==","shasum":"9aed97312314d2a994539aac2240fc6f43f12195","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.4c38f801.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrI2CRA9TVsSAnZWagAAAcoP/1+fCuzQkQGdX/7U/baQ\nKWE0Bd8GbURkkfPSlwiCXS6IGtllyqvF2OwBsoL4dZ4j0w/X7GBMvsB5c8l6\nRo0Nq+WVpVf1X4CBiCtVOwxL85UtaKWH22Fs9EUafse8oasTs4WLO8ueosZl\ntIkXdFL+nkF0ngOQNYo3+5WgfdX09buteutgn4/oOySuzDdDs8QKOUisqwEx\nCKAm8IIhwPcoDkASS0hir/A4IEgPKiElywNAHe4su5xUKBfgsxBd5Gbf+jul\n4PgR7MHgc+htvgwZXWY1uw2yRSMUGU6CoE7C6ttN3li1s9dLHzwJldBhzt/N\njdsAtSZBWFH1XweR37r7Yf7le3JCw2XDQ54x9bY2CaTyVYqoeqaJNH72vYJV\nrlIA8u5Yq6jE1WFkE2DoCreQaJxz84xdqW+T1VEQiaLJ7NqxTqhBNER5/5/g\ntI0FcgJi4+JeuZr42zgDn492V3BFnn/ONoZxUU+Bxs9c+pcsRuZBoMP9KcG3\nqZAzZl2hToDcbkIJ3ZLYWMpp2N/Bsr6ISrTuTnAVd+INYkgiI4zXfX36WZBn\nOyZiUztQuKfQ6COK9rhyXSXy6ycXB1knoO5Ju58+iHabx5vK/bTDbxnof01k\npX0hO0io42tuelhnzmV9IU50UPvvFAVD9GZjt2RmcUlsq8zqn/amyGqkpKSn\nTs7e\r\n=toZt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGi5q+X44UR+gxeSdDnuTFYD+eUExqppz8V4vMBdTcrhAiBWkbNSUopiWE7/Bg2R8ENJVnJxaRogFInIM+mQKnpVKQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.4c38f801.0_1615245877585_0.4218217399325732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-button","version":"0.21.0-canary.8795b83f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.8795b83f.0","@material/mwc-ripple":"0.21.0-canary.8795b83f.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c7d98fcde.0","@material/elevation":"=11.0.0-canary.c7d98fcde.0","@material/ripple":"=11.0.0-canary.c7d98fcde.0","@material/shape":"=11.0.0-canary.c7d98fcde.0","@material/theme":"=11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DyKs41aLsItDqtTacRf0wKS9YFrN+vccX2vJkry6rcDGf/jFZsRzcBVoI7slXqt4qotodoFJPj+gwJs3kn3xLw==","shasum":"af0bd9a78de420b213d8e16df4fcfb6939b58520","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.8795b83f.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74UCRA9TVsSAnZWagAAanAP/3CtDWssbIApmJoqT9LT\niZSCVPlstvuCag2GePybwKBxl856vbNW2gdQEy8RtZgwlCa1UpnZoCSX3jLU\nqXPTJKJMX7FR1PC5aq8jbVl/7J577hnNY1icCnebgiEXroEPhRfKifR6AS6p\n1LloBXnQKhhzf5sViBqtYcSPXG63wphm+MKKxGukqdf4Sg3P3RAmLDqWDvNi\nCsHofbrwirC9CDpE6+020lyvYh87euhsIo2M8A+hoeOpuXfi13Gjz9RtspBV\nzxEs+zZEaXBsp0LGEK/m+B16RZYqoBkHje7u1xPtDWjrNstewcIhA/R5J55n\nCGoLo84l0Zsqe6NjXW20MkbcWhZpCRDt870/AFmDYrCqutIOm+gT9XHtoFwQ\nfMvE/eqc4hmu0AoQ+fE9KPm7wX1WUaPGfKs4UIdQbfM5P8ES0UmW5cHrosN4\nR8vVgsTccLl/0AWUg3Z8yDx+Fa/YS0Bs1zmyhRAuDI6D6blPXH68XnEdAae+\noYjnLA5jeSxg0tNbYuqRqVec80Q4XBu8JSioL4KIq7UphNU6wdp8nF2bbmxD\niB4b9wnzckV6VDFuw3/17X+8MUtolds7SgICK5ZG8ah11g6o6vcH6XBJcQAZ\njy8xjVgerWBmvX0jX3so+Mtpmqv5RNu5rD0gHxFCo6510Okj/iILvQpFfvO5\nfOqa\r\n=XZmA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvp7K7pSpV/1uj6BZzxEgerfJmPEz7hp8amtWCzJuKAAiEAwD6T4PVJnxrqCKDMwkF/RDMWqafaOagev4W7E+fqQTg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.8795b83f.0_1615314452154_0.5139686529373817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-button","version":"0.21.0-canary.12b84cb7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.12b84cb7.0","@material/mwc-ripple":"0.21.0-canary.12b84cb7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.7522dcaca.0","@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","@material/shape":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-9bYU2NwJ2EMQY9zuA0FwuTHjFjUS904eZc6p4DYEdeqJwphNA7uRpv12dofi/buazj25tctc0Yt7Hf56JwBnOg==","shasum":"bc46fa818699fdaec626a93c9ed4b9b9b93982d3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.12b84cb7.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBWpCRA9TVsSAnZWagAAAYcQAIeG4C2jejeYfWwwbNBg\n3fnUHPi6zNmyNSN4yzh80O3egiQklqpCVbLNratdC9/ekQV4vKYxd1j+3tph\na9bCywWI4+ZDgFmB9MVPBYgjKAjftEFX5Ud96XsjN1tA2IacNEsV9HxUBBXd\nZ5CMeNCwxxtw09M60Qealz4KTpuOY1x+ynSUC5QpGwSeESP988jR7YBfSFLk\nFtaMYnuK3hsNPygY+KS6Mbbo/+UzbISPOcn/UdHXwoCQY9SUNvWajlJRBjfm\n6TBt9/fURtg9fk1YEBlR9cWrK7BH+yE04awOyXRKJQS4Z+1pYk9ZAx7LRH6g\nsv07YBXdx8Q1mJDPWtEh6iqyF0BV/sjCmTfry0XK66K/RiPQa2E/WhgyWGsf\nDgn0krv6yXF8DdSojXDAUdkbsisqgISsi40KKUliWMKyhccabAl4hBfUZEXQ\n00EnrkSb4RyT/RQ/3dttC66gBwo/9ggf7WhbyEKcK8cTaNKNutraRWV+9O7S\n8g+c/mZVmbHk2O2OsBGpUoJb/0ys48otWe9rvgw9fqzcP7TaNEagBioSZpqR\nwx9gAXUvAfvQ0mG+vwT9W9UCYSmUjP2r8YtrWpLebxgX0dZGJju/towRZWc4\niqLhdYZQyn6D00RhevvcuUWDu9iIyIIrQurEYdXpkH9/446hlvF/JU/FdYpk\nKOPr\r\n=c9nf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF+N6XCMnYA9q1DOPhntg3ch/31kCG8xqH1IY+XcQmVAIgZ7qp+moPbkYDCJnj/ynYu0FdvbNKnd7fdy5nopjResI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.12b84cb7.0_1615336872855_0.09231464134055112"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.6ac6784b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.6ac6784b.0","@material/mwc-ripple":"0.21.0-canary.6ac6784b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.7522dcaca.0","@material/elevation":"=11.0.0-canary.7522dcaca.0","@material/ripple":"=11.0.0-canary.7522dcaca.0","@material/shape":"=11.0.0-canary.7522dcaca.0","@material/theme":"=11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Bdi00j0kA1yObHOvfFKjg3tVS75a9INCCcjAd24St1z07ndwZce4NqQ7LDuK9ye9JrOCED0cMIqP8viM88WzKA==","shasum":"9cdbb746757fc734cded826d31eda57845ecb9a7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.6ac6784b.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgICRA9TVsSAnZWagAA1QUP/3XIaV4ChUHRhYyM2xZO\npTcMJ5knDGgwZWH02r/d3NvEVPU+QW0fPOZvhx/NPE7VPMaNksRuhVucSuLn\ndQKm9DgOC99DFfbY7gvibMgk5w2U01PlGZdJ4/xDMKbSLYKokLcBBogpbiqb\n6WimM9L5Jwlg/WtyUXIwfbcdQhKMUAkbAiaKggsE5xI0ZHji/WEELBTCWwWJ\nNN8hk4GPqxFLa1RWR+3JUzLI4JJD23ytVRpitdyQ8xozBd1EVWV0YUAarCry\nmcHzukg3k0OTc9SOdFpV94MgdC3XEzlSy3hdW6nUblW8L4naWzy0lhNY6kTn\nIqECQ7VrmAoO6IkA4TFyOfSt+SuWLyqxSxJiVNPJujccs7GjWPs0yNsc6/qg\nd8A2RZTw7X7pM4/zSK5e9Czsj+30l70ydRmaUDwGc0Hak6qz7nUiL1aC++60\nhOvMPaMHN3QuvewTsUn7+ESkodIK9vAkwi85cE6ApikT9jnqkg+WWSUglwCR\nfV88KbB0j3KxaiLLCdOdAfTRixyOkgClTx18ef5i0U+GqowwVb7nWTiVD2V7\nbVikcmsiPlXMw19GZUjeOtMgXPh42jFebUaf1mn8wyckGBRDh0SvWejFNWs/\n7HGqB1OMOrpehaweYU2eCKKJEAFQjvGWB/wazbZ2F8o2PiP0vWRmuBrv+v0t\nuOs/\r\n=G36M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkpxl4hWQPIqB/jWdmeNyz2U8qruCCrTA2AjCLWMpi6QIhAOfEN2RVTSuwkd7cc3E22v3RU+sfuZqmkr9JzmMfYKbv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.6ac6784b.0_1615337480397_0.6427204017310144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b6d92934.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b6d92934.0","@material/mwc-ripple":"0.21.0-canary.b6d92934.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-MIAKiIkWJQifI00NRFjK3FYfZxkQ62sOPk8ulkz3kZaIS1O6Bb5+IKTB7M87FnrtfO3Pxo+yZ30L2uhvTllyag==","shasum":"e56817a02ab685e3b1b01f6430e15ecbf7333015","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b6d92934.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGaCRA9TVsSAnZWagAAYrIP/0cIbmR4bAu8LGZmASc8\n/Poj2Eup0cUDdGPKWqho8DEpLacbMMryb8XfU7ijcD99Q2MDWa+aDhGuk4FE\n5sakM6+DX4L7p7hynOiXqgO8B6zB6cyBEEUUDVF1mGyQpTRNteu33/raeD5v\nel4fsklPfvxOroV2ov4ysobTBH4ePEEjwANJLklZAUVMjERlsjC+gHfET+wV\n0u8EycjqkZ+TB222XQcbBA5l162bh/K5qtz27SkmjlA54omkdUbQttqdAQVo\ndiMayy26I8OI/fsMN9rEXf8YocJRN0v1To5OMulgarV7YPcygo4xITtfwIZ9\n85zqQ3WDr0cucikiYZ2b8+DjxZkFho0N9qiNx4T5eXdB4bz920L3zlGR9dsX\nBXFQocHiPWp0aPuNxPLX8uTwHdoVi41pY4fVmiD66gI/AcHPUdMkRhsjXBJX\nSecKpy6t/cpAUYmz2zBxnmaXEKADiPvIpm2ftUvxc5O14HrfOjih5kVXGcEP\nD+CZL7syTO5rgPJ+l5cST2sOlCqxBO2MCSX3EpV0LHBVV+7bIa8LANkqEJnF\nt7tctqyHDvaZ4x00xYY3HBJupO6s74HugxVxmvn1DZvWaFi7y0TAsQ7qKM50\n2rSb6/OKb9grwSQ60zj/Q/6mGIBFaFueBy6P8vGnsCHiWKIFETISlM2Ugdg1\n1IWW\r\n=fMAL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHnLtWk1gWKoieX89gHBijd6FTAS+iKneHuJpgXU1SR5AiEA3Saq32dgWveGt7+J9n3Ahds2arSPom1PU5LZS0Hw7/U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b6d92934.0_1615413657685_0.7004208666967151"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.99a55b9e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.99a55b9e.0","@material/mwc-ripple":"0.21.0-canary.99a55b9e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VNGJwaygjE86PjZxa0DrIZbBQellpAwd2qwEuf5ONOghsiEXMxlD+oqRh74t21afDEi3XLqW7CwY441Xp6M8rw==","shasum":"98d8f067516dc9c60a18a93de933e4774559e2af","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.99a55b9e.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2ACRA9TVsSAnZWagAAc+UP/3uFCrk9FwahZjQEUDY7\nyOU+6M+7SzkHQa/M4Y8rSJSVV8ko4Pfo4/q5DtPB9CHIpxbMNi5d4iUuLsl5\nj5zfuMJmFNAacsaqjphRuyKPhMtAzPntISK3r42+31xo1R3jpi8fveo2/X10\nrSMCAze6tHawJSvESdwkY1x5yvWK6cm9oGhvsUV0UUwwuAUwT3pQrKPi0uNE\nekwwznlRHlq6cGEkPWxXyW5w4E7d/FiEkUEbCS7IyB/2v0UgvOnE4ETBsYX1\njRjCNvLmbLru5dKhYGAhmkC8CQiwrz5JVdelMtbTpXEXk8IheDltOcOLIHjM\nOusdzTCqhT12NHRUljQ3Qi19QBfm8DbYYJLKfDduOUX9WvPlRDZKAnLTwtXT\nI3hFV9oOlhyLSyF1UfDmuZS5a69cuDZaN0nWrLJ2mQqPWZ/LyiOIpDw61KBt\n8O8h8IHoUpH8dDuutZh/yd8oVGEUvyB0Lj7/zElCWDku0PWD4IZ/uShiehF+\nmJpzVclVIw6gly6LPdWp/YfoYc8U4x6dvlt8eqm3MYOmHnASucMxypIGK5KI\nDqlDaiiR56SEBichIwp2VmbwbMLFAEYQABfRn1ZL43Lk6S32x7hpiKt2s0lq\nuFWSArcloaqNw3uxw2O5q7sVzmvO0alIDUdQgdkUI8ob3kjQO/bkhWAVdqdX\n0DFL\r\n=QOD7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7QJ+JzV4wdqZETHWSqyflHOAtVCIMBg7J3ZhkHfAGhgIhAPw1mPhBixBvJTBR/lPnl1aQ+ScfiGsi+VhSfBTm1c0J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.99a55b9e.0_1615416704104_0.7769048623184394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-button","version":"0.21.0-canary.bb14efb7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.bb14efb7.0","@material/mwc-ripple":"0.21.0-canary.bb14efb7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ctAbobvL+jVA+q3Qqk8aPhx3Ej+YrD7Vm4zWLbnU8TzrsheRf1jvPzVKQyd8MPQqDAzdeTiVBCaJR0n84F8GvQ==","shasum":"0441468c592036adb3aeec3ec8f2324384a6a4df","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.bb14efb7.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVgrCRA9TVsSAnZWagAAo9YP/0CkgjRYMF3/3TCQB7My\nOH/+AYmzOx/dI5LTUAqT2ALu2TfcFoppwbeSv6lnDx4bIQ7jZ8e9TMBip+na\n8EF9Zwj97c9nmYIDRuu68mPpXxQBRdUxU7Y5UqPMR/gh+6wFgsDMYU/lcsUO\nBMTM25dVcoAXQiR3TxKkBLPRgVIg5HVlede1NlOhb+4NJINuTTXCFYOc9r1i\nIMhDPvluT+rcaqulVF/p7+phrAO3xAMvCKWlRII9IbPBQXlL3UYN2FKzX+AJ\njtS9kTn97l+57mtYA6Mu9A0JVzpQ4CkpNBv3CbNATU//6GQ0KZc8m4zUNdyY\nZwQy0nUkfx8fQjxTQOQRY/0Irb6Sv2ODKF2uRan/pe/DIvBNSXAd7rcx1FBC\ngZf1mqp/TxRE197UGUsLGtF0bQ+nVZtcbIhT8MRDBBtEXaIz6PDuOGa3FhzT\n1H5skFW6QJESWekD5L+lEN58eepvqyEBQx8ycMQUK/1I11mJqw8PF/lpnqGp\nmZATnbUuokLGqJoHryt7FeaGW6qetNmlR1GyzXSwFM9bDVaa8h00zOAN+DAc\nNo6LnrJbuZUKAcOu9MCrNfTTMHGnWgWHBQmdiPtkJx6GR/XB3qWe5clleKzF\nW3Dj95O16oKYLjHtIqM3VGilFepAau7oJWwQNaiWppjhQcRtluHzkqS+s1/J\nsSmW\r\n=cDXD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy+nZo+MIB1gXzHc+svsdt6yIQyQBuhNLMuvhOhWjCXAIgISmjDyqnsnz5HCxGtdDBzhRVGDbUs4QlTxrOATjW75k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.bb14efb7.0_1615419434722_0.11368886934369438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-button","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.9ecf3bdd.0","@material/mwc-ripple":"0.21.0-canary.9ecf3bdd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-z/1UZnuLQTyaaMgKW4npRmNO1UZ4uF+zC6Y8oVBcqGbtbpWpCTUT+2+wrT+ad6vfypw/+bFWV6xe4fUidKz+ig==","shasum":"173ac08aec8437ad7441a0e770474f6fac84ee09","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWL4CRA9TVsSAnZWagAATDIP/1Ko9hLHlIiChpVYfjhi\ndfXFkmi6r0nrblTcFUPvazCCzIunB4NGC/tSx0rIdUOcKkxJUny+Yl0YtL7d\nse2hDR3hdymYwb/10QHLANX8pZ/fh8pP/ILcMRI1YT3ZoRVBi8r6em2TTBJ7\nFSf35eWOA0/5fEY3NIAYRoxAGPWpRLbqfhRPkRuG5pUeKUY9wNEKpF5uWQkp\nI7d5au9J5/QXRwzzfVezwiSfo0fY3iAat2wGPzT4VwghEqfnazAFb9SGDNWt\n0k8BBMWiKZr3UxAUQ6Q0s8X14XpONXqet2zhh5RB4Wf0zwOmbguFecTDZclM\nXreLFPcuGzvLGSDoJ5bYHcVesItoHd1Ew/4TO0lxtWKK0AwOZfN3Stv6+hS2\ndGqWMGSnI43300HzERwxpPhc+qAVfiI9feeYY2cAtLjkMU87klfWRxEOKbGz\nD3aGyMDcfqaZwhqnJDrPH/c6F+2KYmQxNkWM060iz83/ydFd1f61t+OsqluK\nplC8thn/lkmMGuerFO1cHVAsXn4Qo8IPsYkl0aM9BgWAXdyUlzwILGRqsLFB\nnISCne3TuR6WHyNXSwwJluyb5cez3fPWF3U6RveMZ1KVHdBwtK1boTysJ/Cc\n4KVb326G+FGdw4eJj76qryZbJfUCzuCJLzshnuiVwyJGYnmdvP+J1+XzmXDP\nc6TH\r\n=oC+i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCs2nFCwafWlQoiftYWGE9ccPaAO6U0UnEvd6SFZ9+QywIhALaZgI5CJrgtu+zyZBfNSSJJQFW1MVAapX+OIxPir4Cc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.9ecf3bdd.0_1615422200048_0.12124225870272909"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-button","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.7c0e02fd.0","@material/mwc-ripple":"0.21.0-canary.7c0e02fd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OcNKKt5Q/9nCOe2j1kM87vbMx0r+IxPDEclpn9GJdH6DvgwwV7ToneyerFB6A6FCk7qVJQgXqInMzDhMmg5CBQ==","shasum":"133f5550b85007645e626b7ea56063f6968606d0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.7c0e02fd.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaACRA9TVsSAnZWagAACaEP/1jLnjjlQ1ksXKN9LMLR\nGQYbG7Zs4K7KnuJxI4urXixrslsmIOKseAI1rh9xb/JF+scmx78c59dH+vBF\noyyaU4JFFZ7ZXLayEvSC4azCUaOFw4VYHqJqJFxusUBfco2bJDBWTOmn1fb4\nAR4QoRn6HvB3Ekv9jbfrOoJjONIp1dQ9dELWMh69zbnLua2x6U6zgAFHHZBz\ntUmlvunuTrsmkN2XqhEeDYQaXF1o2gTKSKR0zGPPnZGWScn6l5/thRKToMvx\nvVxTp/rXqn6Wkzt6AONNbHS4/RV8g9nFLCCxSulifBa6rq9wCY09XuHNg119\nOQWUzPQS+S+x1A7Wp9uCSPBn/06NaHT5ho7pV0oO6yOL2cBVODI48XyEkgkC\nv+QReGq6MdQGzzGFbVXqqmYVe4SXf/I7goaxdYCTZhViDAru4ykobEOV26Lm\ngYXsppT/nm33Oy79saPevQJfHcy00rSKWN+Ufu6uU/igRYqBV/cOSPLG4zI2\nhq/WV8XjA87LXOqA3UPCnPM1li5Kc0Pc6JupFLapvnzA/qSZ8YnXSEd24WJ3\naRb5USZBKheIXvy+FWECSp4InWPWfAShAZj1TgVFCiZjezI2w5LJ6xubEq/m\nXkfAYUQwOeqirCoyVrIvWvgffrl0lXV+zy9FafMKhTXMdL/5Z3cLpZKQEoKW\nuJnZ\r\n=s53k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzvaJbWg7GhOlaVBj857Ydnb40vuAmypi8o/t7G+ADcQIgLuvEj3/PJPBLn7SadBl3W62tbjG46jRdch1P+Ac6Dq8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.7c0e02fd.0_1615427200549_0.016079279676351144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-button","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.2d6d59cc.0","@material/mwc-ripple":"0.21.0-canary.2d6d59cc.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CO9vkbKerZruu0zpHvwF3GgICjD9oYl22KyfnXdSeXvrkzFkwyuXMsaw4SvUQqL53C772Y4vmbCYPkNIH/2WkA==","shasum":"f1e695fb6cc07015c4073a83db13d3ce7b3c5fcb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.2d6d59cc.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGCCRA9TVsSAnZWagAABQUP/RDYsEPl7IAM3f42Futq\n3vlqKKG7GE/GHGXH7FH8tyFs8hkN0OapwEl67bc0I4QMURwzCit416Gekcs6\nh5itL8n8u1u/59FUFRuq36NYy9Npds0mfDBjne5Y4p98DOsXt6Vv9mvKkZOW\nRn70z0SeOzd5/s5vGhK5J7PhSTGr2FQhnXIDhI3CgRUaj92uKetFe6WEm1yr\nmsUA34S6MeTf1Nh9EQVteb/7t5rykm6g/MJoUq2IIGvqKYviRaAI8KE7OfBo\nwGdjryGIKQgLHN3535Pgq375fG30UIEDUDtpzFOGfbhjfl4Aj+5fxCBRLfDE\n80rW2dC+Vjta5a0wL/tQSJ25X5cVYlm2dAKvxXkMod0R9XWIY2UH7O0Rbh8/\ntC1sCx7Bu/1rVK0e7C3g5wqIgeyWVqkDNnR1W3gOM6HWqiceNMydkW5dDZd9\nWdwJNpKl3F6nHUR12Tim34QezoVzptE6db67rwEQsmiHsF//3QwIckxntMcZ\ncXPpqqaKKggtzjgbB1ZFhnVmqY/qiWjjg5JO0K6XFJ0X0CfQcseuSl+uRG8t\nCUdPP0XMh9D4OVCPrDQyb3QN6qi9vl0yYIY+pQPPVey74V1nVimALlx7HDzb\nDnBoTTxiqYnxvsrBvfgcQwKrgzvWrbqfBJTk5sQGjB0zojUq3dVNoVKIHT9q\nAq2Z\r\n=mSMC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJMZ5SL+fesJX8A+B+rI+1LRaucAuIpqbfBQsmdFBOigIhAP/r8iTLmy6SNAvjVtizcpoxIGIWrdqFfqPHpzV8Vn+E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.2d6d59cc.0_1615487361741_0.47321336039902184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0138863c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0138863c.0","@material/mwc-ripple":"0.21.0-canary.0138863c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-5xXUd9as7Hpoxqc8I24Enaxs+WFapxpkV0lt/Pdnh3Hi8nmvILLPAWNQ1/AsEilnC7ZO//EVJ9Q0KkN1tgF2Fg==","shasum":"7dbf327c722646e53d80b1dc69e6238e9f7572c0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0138863c.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNCCRA9TVsSAnZWagAAJoUQAJfKVicOKkMTTzwyolkx\n9+3gMfYMGRS+UTKJnrZu7/E6//qjxBCQaWnvq/ukQWID+oUORQXMVvPBefnD\nOPGK45YkuoZbL62gcorez6uDv3+e9W45f60F8FOqxmX5Q2eQKuF1J7wCL3V/\nKxYUvImLcXfDGtuYx1zvHsvygf7l/oeK+C5gE0EZ51OiUv9Lp8osroL2csqm\nkWTtxHnYAbofOBBJpaS7ycUCoTBdzHU6mQ/Yy192zeIPondlnSsgyQlXKGHT\n4YhUIvX+UmSNQ82GI/pf3fKR5w6RXXLYl8SWtk96qPLqx9wV8Tz+tBM3xY4U\nqbfv6iIMZ21FiSK6aQI2CB+ykRQp9M4ROzLKang85XNYLvMe7IPx1zXrSFTP\nINZRES81HZRZapQbIaiOO5KukD6Tao8PGLWRJfTs2UmZnmJuXiap45rMZqBz\nG+tf6VY6oraSP21vOTy0P3N7MfwNOJPo2BlagtcEvXjEt90ORzGlic5HLJ9e\n7DNwfYAfk2FwL5Bt4527Ehve7tg3P7etZ0vCRSDNQP+Ileesl2Nyzq4urH8u\nAx0ytMOkOUody3nFiwh8C1SvFCVE8+62LswnE6NXfihczbJaxo2dZGKcEN3W\nh8Vxs4ybUmDD1BThH9kJ2ccIpeKz81kNyr+DajrpYl9gRM26p6qEGv3ZJTVl\n+Ms7\r\n=zT6i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6PxhNvqLu/6nBgP3wc2279gOiLqvICvi04qbogHieWwIgSrA1nETMm8F9AeiKJyXO5+8shLwG65VCA9cJTaiYu2w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0138863c.0_1615487810345_0.7296945762568465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-button","version":"0.21.0-canary.926f5bad.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.926f5bad.0","@material/mwc-ripple":"0.21.0-canary.926f5bad.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.59010b6dc.0","@material/elevation":"=11.0.0-canary.59010b6dc.0","@material/ripple":"=11.0.0-canary.59010b6dc.0","@material/shape":"=11.0.0-canary.59010b6dc.0","@material/theme":"=11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-eghjWXHK2yUCSKuKCYf2VcI1mpAfFX3Z8Fuh3ab/c+OMdLMMxQsR2F2C2Pb4OIAP9UjfGeA1XRSbrDBJ5O3Yow==","shasum":"463686381399181bbc122eb5a358b45821e3e790","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.926f5bad.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnsnCRA9TVsSAnZWagAA5XkQAI1Z7ftWAsz9Yk6AP1lw\nVqmmBv+tVjln5ZgjkgLZsTZGg1p2l5EDneY70NttL1+1s3SwZHrIXzQwwdRK\n5KolJ7Vn9NOiIrp90+q3iXxbiwr8XoWmti0X5cp9K72HmSiijAutBiR8OYjs\nCM0Hka1qvf84znWrRXTpRBqqF3/RUzkuNANMsFu/FiLVBkT4I38/j3jFRHON\n+Pn32qAH0OG7XTZw5zvn7YTPlHUNKl/ejgm7IdUJ/VFm2zUUh9AJmxLGtQRL\n02NRATRDntRD5gDkb2l1dKNTvtdA6vWWMa04hm9+L5c3P9fNCMmMo2nUdJEL\ny/+vD7NMmLjUS9ZMAY2W1vwvWA/Bu6ZNyNCTrPSVgzfMgFA4dm3Bl2dLE6jc\nQhqoWeFyzk0LUhUVaR933JH8pMmqgm8YKC21T69TxiQrXdptZnR1MTecpJBs\ng8Mgw++bNBkOzX0Owo70Gq2funu/KJdGWYBl4iiYtRKi3Q6OEwTJBpWsRNKD\nNxdH0lwQktFeDXXJ4HiZjLAcDf2kUCsbn6+IpsHrvtzGRS/MfskHqR34aanT\nGiadadM6TbnWLLKP7ji19ZRpecDQFJ6fKw9zXrpTbqdKtzZ9ghBZ4Ldeav9Y\nP4z3hsTmTLZfzBZnqw+kjbcqW79FVvsDiAFPfsVatkZeLWCe5BW5uocNBxqJ\nB7G0\r\n=HwP/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPFEa2dVLCFIKn7l3mthEdhTmP+sPLMkHV4JHuK4briAiAA/o1MsVzwVCXizdeFEAGdE769R/gJbnQ76x0N3eQHtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.926f5bad.0_1615493926701_0.32760360372885344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-button","version":"0.21.0-canary.520290a9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.520290a9.0","@material/mwc-ripple":"0.21.0-canary.520290a9.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-cFseVp5Z/Pn2OsgiD+HNilAnlSnVLvI86v2X+xiPzAx2VLx2hSPaNeNBLjrSKGARMVtW2fMF22o6Negh5YGJDw==","shasum":"3f06adcf9a24a22a71c9d78bd98c28b5baf49c0b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.520290a9.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpluCRA9TVsSAnZWagAAfBIP/1rKQf4DMDvepFkeQd9C\nONa7jK+05+2oH3AQ9sfC/25vwgz0tYu3C9g+WrkS8WylxNt8TG3vdXfMX4Tb\nusztm9qqaePSTc7ZJlVRA9/AUKoUaRC8CV5xwTBNZIOGa9FS+YU9Dwpr4SNk\n2m0wGAMKCZC0aGzpmB0ldok3/e0/NhQXgrlowGQiIhI4T9i3Z+wlDMiMQ2l7\nPaKErDaNiZXU7+6+QPTT3hQ0L80O23onVGlj05BZP7JrpCktFKN3JGJOH/S6\naT1n3o7pjDwoCC/9UPrZJZRdBXcR5kV5hDAVzZUWOo2aUfzu12oauZ2WvhMf\nB8jcGCPJehAVEWNJ6cY4ScVbOd8OU0QlsVNZCAHAN2V7TO+3FJAinSYAMJnt\noDqkhMs6uPT8D3c9yRczRrtEWHj8nflJMFZ50vVoWs1RcKOMsAhqQkwqs9On\n08ebLiBOSwXyPVNFji9C3/uU4Yef4CKL/+kxw4LOkfFRi0TKf/e6QHn1utRW\nKMsQM6EjN/FOmO5rNLGZJvJIouDleLTsF/jSN+yFqzKtfyr5WaPPVYPzq6WY\nqXr1UfY3FqIytdpevFdj2oi4a8tKsWrOAS2hHeJm9iWXFAu+dyke3LYcqe7O\nDFe6RQiV/dr3799FwkGLuct2poZoO8j0VaxnR6Tyoy2315M68Jkqv/F46dIk\nWyM3\r\n=Qh0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCm9w990ONbVrR6nfKF+BDVvmV3RNU7y5+PDr+XiWOO0wIhAIZXOP7HSPahRgLX31pqdNMZ6TtbOq1tY7i6/Q8UiCP7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.520290a9.0_1615501677522_0.9064189849755304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-button","version":"0.21.0-canary.9ec431d1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.9ec431d1.0","@material/mwc-ripple":"0.21.0-canary.9ec431d1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nVC2hf09speSqNuFqNz9Rp4vAlhi/iZXxCpXhR6cj03hBL7c7fZvF1AF+o2EPzNm7NLBqGmMSaNZd8Mc2vzfbg==","shasum":"45015f1875256cfe1ae408beba4912f2cff0dd71","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.9ec431d1.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpp6CRA9TVsSAnZWagAAzpsP/0OJd3msdN7kN+wVJhcZ\nhoxYfxpOZIZs4fPjwoebXUKC1n4g52kzo8BXXH7EOhOs4Kpm56aqM1/kmpob\n3dpeBrbh7/Ios6MvHclXc7Kwv1x2SqGp8jDuo2wQBeczV6u/FZ/ZeiHzBKhD\n/f8aSn6msroadwOVTH+5vkNviECSzCN6vjtVxeVfx6G5Oo0uFCkUNOmEHQIs\nMNsuXXSjGv1t/PkVaEA2pPZPlCeFqvLSX7XDDguwC+7QS1GDnb+v51VLBqZD\nJNLeckDx4vouX8SRy31XgR//Q64Lmyngy6i4HFrvRSZr6qUjh97c152YhCDB\n0fWVcphmixzBTeMsviRxmkjvDcQVqKYscd3+Mm9Av+3LXaxmYSoAkGMy1zUF\n7lfJ4qhrpyz6pI+lSba/CiX1unCCxkJ/Gr8qE4wzmBkJr8gOx+lzDEF8lKJQ\nhquJm48/BThtHHXyjuJYNWSZCaoWVMFVwy3iIuaKR6Lih8SN/Y9fK0G95huy\ninG7whzxEZwKTgu9j1C8OAspcEGrVhOsLIxNjrL1jftL/aYDNyi2Z7fTrmNq\nQ3CienSVnD15SUegxtLiZ7Wk5IUGOke2Il9VIIPeEre4r1UiP+4YKnKVRiWQ\nIlbXHCn+x0Yc/Grali1Q+GdcbJwndooyPAg2wbeHyMrzreD7Cy/ZRvIXlDgh\nwr0W\r\n=hn+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCttEnzs29OiwDN/DB/Cp0CJdvKMcY+vL9/Dtc17oCeDQIhANdGREL7iqnFWD2MmM1iK8RLMtf2INuxbYJ+1XjiQM8m"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.9ec431d1.0_1615501945547_0.5022524431320956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-button","version":"0.21.0-canary.4246c082.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.4246c082.0","@material/mwc-ripple":"0.21.0-canary.4246c082.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-jhk1JQo4KJB7KyibflYYMxuPAEZsD1ytwPlcAa4eh+Va7vpHWshQr/JUGSucbckyd4r7geXi/OCdzLyASEZeVg==","shasum":"f4c1309fc96833555be7e8a42fd52e9e0761308f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.4246c082.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwcCRA9TVsSAnZWagAADpkP/09QkpQKMB2VO3wBI2j1\n1rFGI+XtqzBN34K4clVRw4QR5SUqfCmtG1/wOrp20UMvel1xJxVYVwBbCpap\nWw5eP7zldFg3wXZCUEdcndhIKvSzOcuUFG6FEvu0bwJ7RsH2i3sRcCZtegg+\n7zjDebwUO/NEyI2NtfQI3CdBvVw8M/9MHII9Rl049a/XDCA1L6dUb2qyY9RP\ni7wexEOUSeNsDN7x5XdUDIEcAAYQ1U/IfYDg5URWmJMCCXCY8S6JtgSzSLJQ\nssIymlwBOEAcoWnwnjWaS2YKqY5wCzOC9nklEC53q53fqfDP9MOtRIPwbMlL\ndnS60pvNctucrcoQf+jDsmerKcH3sgQx6WVbYCiERZYUpBaRONmTS06pdTgR\nqCldlXpuG4mDzwDda2Cq/NAatFl6s1o8xEKvfee+l2/VtTYtIS3S8FhK0yEo\nzPr5YSWJihGVhoY7ApLJCCKrqMl97gJW3nZJlW8Nbb3cJhLssqCg7H4Jv2H/\nDoiovx7Nleayn3I0FBVshbjk00AvHAxpPPVhHFubSqkstR5KcNcUgW7RBOH5\n1sDXjX9xknzgnC0RemebTIRODFv5jaVWcaC20qmTagMgBJGICuFsLt98vkrh\nXPtUJ2ctt0d1Y4e1k7k5cNi2hhy4ZQ82szwXQjsMfddCkA66lOKbHwhXEurB\n1gD0\r\n=dtfb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA8t4/GX4o0QQwzUeXmTtkHe5jAdVnVpCr3sN9IpZRrYAiEAlFwkx0vVFCNKL6tqpshLCZzDEGl9A+Tdh8cM+2+AfbY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.4246c082.0_1615502364080_0.770004737505938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-button","version":"0.21.0-canary.2d736253.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.2d736253.0","@material/mwc-ripple":"0.21.0-canary.2d736253.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.1e0653477.0","@material/elevation":"=11.0.0-canary.1e0653477.0","@material/ripple":"=11.0.0-canary.1e0653477.0","@material/shape":"=11.0.0-canary.1e0653477.0","@material/theme":"=11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ofLyTy0okQysZhkH5sXIH1qYYGueFT9AX1uXs4EMxZFCyP7b0Kd5eRkqbdLITJjyplqkfUPpLtBt1HnrNym10w==","shasum":"88a1b2523a069e2d68949052ed87b8b3268c061f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.2d736253.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FICRA9TVsSAnZWagAAUfoP+gPniKOqO2yMc/sui6X6\nfNumRZ8ZhTNTGqySV6vnIK+3bgPQhCsdSQ+qEUL+mgCGlx1DJMtJLM4DLfBR\nLTFZ0mVSKzQz+EBpwdxJ5T0BVnahYWS7EJotFHttSIijsgYbfcOIFzyt9oEg\n4R7InhWJvyhBIBnI32sftCW6IyDuVPTkXfn1NaeS+fxc5GmLyGMHBFZ5M5Gy\nHeIWVHj4uRmrenlnwFBNwSFUooVG4h7f2uPX0J/0UAPhBQBQRZSRCpQEbgAr\nZ4NQKNw2JCzguhWdQU5ppK1noKXW/xgPBFVZlMFe03t5hkmFhB70I86WdqHz\n+GEKT5Go5Ougsdt5ErXO8jnetQTYj14Nm+hz8fvZDPKJgkvv7dwaaxHAyUyV\nFIBn+qK161mbcykFcqrgotBcTfXln3NLoHGYQ12R6aJ5htI4VPh6RlTWs45l\nrPjF2K5CsW3Xskf9eZco0WGyGpEmKVvuZneH8aJmKJNlTXDiwI9MG60GJFqQ\nxiWFzVU5QssjXr57deT2giPmY51cPhLTZlg83uJWZbUVuAXS7o0e6EFfBbh6\n7rtNgesolSuGTKRKaDH0i1YMtyMiWM3WrtmNIJZFFc1O+fWCPhI2pUl+Rew7\nQRAEJY2QzeQizzIlEd8YCOvPFCU2fH3wcW/FWObm9e6r3gkY8JwkrQa5sefN\n9IfP\r\n=pvf6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbSOtT6dqbtJL+nFGASuQAybQQkUhn50iRdDwcRXWz3AiAJQd9A2zj01CwqCfSRpPHD8YmwJs2ja73DAZBBLa9Nzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.2d736253.0_1615847752380_0.5710238496867373"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-button","version":"0.21.0-canary.7033124d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.7033124d.0","@material/mwc-ripple":"0.21.0-canary.7033124d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.73a227194.0","@material/elevation":"=11.0.0-canary.73a227194.0","@material/ripple":"=11.0.0-canary.73a227194.0","@material/shape":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OXj0OF1ThvWMwaF7GMyh89RNgZHBunIWkQjRPRJ3UY2m9SkKg6mQAEClJHmDwuanUkEVRq3W1XTcpiwfnh5WEw==","shasum":"9af3373b38ae1fbec09373a4551ac8b54cc70665","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.7033124d.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPrvCRA9TVsSAnZWagAAPE4P/jPdzs6sZXxzz6epO5EE\nnhLEcWTkdv+UPja6v8VKsm1/RobG/bA/tc2JX/VjFS/DDaTDWsm+NIJSL1E9\nzawpEIRkxt3/U1zVEmHvf8fAoVnyBIc95WWMEX+qIi4TNHdJpNa7HpU0VE1v\nB48nkzXnE/skSEtEdMLyzkRX/2KuNtt9P6fj/5Bv8mDAWy+WZQ5FLZ0+/Qxc\nrJ/iJvecDrbJU7028IvgH2dXt4WvnA9sFVK7jJ/wYRnK5J4Gvv7qta/Q9rmX\n+cZNPMrb0WSHCJD6nWsWUHT3qHPoHvfpfKiMmuA3x6M+qzhizT/luYvyAxTh\nG6Ee1H28tRq5msqS1l68dwk1cdUU+1BaApmnUclSWoSQRWuoYRIDKNRiGbDu\ntAqS6D5hPCvakmoC1hWgZXQeqNZVE8f24Rcmps3Vfwqwn4IgXM7T/JpKXtLx\nBJ1IwjYzgBhRFnEPBzypMDtqN4LumhLSWWPPuzd9eETNTNMiOWy9lDQf3dvG\ntnPrqrMIkLy2ao4E8fqK3PC+Ize+m2jBkS0CQFPrdmYDFMyAX88Hq3sTeIo+\n2v2uEOdVKdIWmUHPJcbNGkgXs6R/Gi4C7CcBpiKlYaYWLr7WJz0+Xs7rlkoY\nNJCVnraLGVXKbs7JwyuZx1ANpqpyEokPHbvYUomvPs8HHuY8CWKrroMyBPQH\n/j8V\r\n=zciZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCespSUgLI/sE5ym1OW84wnsSdSuoDvEfp+/i6WX9NRqAIhAMNGfBv/MhCf6/hlqCjJgompCrLWDyn5GkQR8L3auQ2P"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.7033124d.0_1615919855127_0.9974452157722669"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-button","version":"0.21.0-canary.6c0ee901.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.6c0ee901.0","@material/mwc-ripple":"0.21.0-canary.6c0ee901.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.73a227194.0","@material/elevation":"=11.0.0-canary.73a227194.0","@material/ripple":"=11.0.0-canary.73a227194.0","@material/shape":"=11.0.0-canary.73a227194.0","@material/theme":"=11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-aKU+dI5tmTyV/n7w5rtEHF0D8B+j4hdP5IKKbsU5bD55r1ubOn4i1eQkoYu4XiMU4IxLebcp536rmMW+ddDt/A==","shasum":"ab2100eb7855eba85e00afbc9cd011021548a00a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.6c0ee901.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOFCRA9TVsSAnZWagAAZekQAJQ0lA/Zo7gARUbqqEOI\nw7qL5Hmf5WtCYYxDnrU7yKg+R3u28x3dbdWTjhuc8OofLML2VLgp2pn23fWJ\nfWnUdkbgxhjGlAatQibe0Nc6yrT5ab9MjurAMymvMvyeZKY0byRfSWSs5tuK\nMuhhxbRRuofJ1bx45HWHMu67TJ5qCXbfViOXm/+pbOH4SZwu/yscbTI0BVR+\nZwFsFcW+lpVLgOQYOW5ZsATHkJgeMD3kCNsN2WIatV7HQlK61/gVI+/VB8Ys\nqEdj4n/m1N9RETKOgljSkgpkPyXIhs71uKb+5zJ8pavG/mPH4NwH0z/eSI50\ntns5XvyBTv8admmrm75dv/HFJalAG2/ADEg0QCfrCRoTiFurKISNQpoBHyut\nj28wiIux6eJwOkVFKxJmF78+t9sI3sJ/PuouUgGIEs/nD1UiuzCaXr2o0ODc\n3Vt0E6SG48wyBKuL5MnXv9J2bx2zc2j95GnWkDpR4HQL13NEcINU0PlzxDU8\nsIWYhbEfStVUpZLHuNbxhE3GFyu4oaUu8L3BHTVhwkt7TESSbSEY0IUoWOCo\nfFkTs8VztK0o+yGCkqQnHTNgZd1zdlPp1EjVI7ZwHDV5Daapuuo69rxHRMyu\nlVI7HVl/7lJFGo7+5lEPSRsZwteZZr4NcmdH7uvaAPiqXPCMMMz5M9av+2ip\nlN05\r\n=63XN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDxq6bZywOuRD3/ROYA/Q9ABVatSur7f1TV23bZmgRmAiBYwAUNWczQcHjO/oGAvWMm00vJtaO9nJ9O85nojkU9HA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.6c0ee901.0_1615934341202_0.6289224017400903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.7f0d605e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.7f0d605e.0","@material/mwc-ripple":"0.21.0-canary.7f0d605e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hvMPKZ5J9+q0c2jyVeYe0v3YtAwvyznOsON4sIq0FRpY7B2XgRo3gRXuVctFgs/OspyL9Uz34s+Npz+EPjucLg==","shasum":"d7c56ac021b2e298917a2129d45136ba551516b3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.7f0d605e.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkS5CRA9TVsSAnZWagAAkuQQAICKug0QDJvQW9DcxCRR\nmE65lkZLDVN4R5Qd17oAhmirkmruHdvAUKbkjqEC9uRzY3v1s+5wEfyb8gsn\nBaVtk9hmAigXHdLJvxwMyxHtAi72yNa5NjT0p0GKHDgY3YVR+oSxYYZf7hkv\nM4ZTMl/YZjd0QWCqI8bnnmf0k/B6hRk9LLI+w4vP/ESWAvvcFvNhfxXJP/LK\nhWH+pxtNTxxGaovdSwliLYvM/LexCz89R1ae5WbpVdjcUbH9+Qx9Fw3ky0G7\nhf1S6gKS03qW922CBa0IfArnbAB8SuGz/nUzML2gyuE7n156oivPTBtKneC0\n1sRZvriPqHZwa5jHx4SXaF5prrN+Ce9s0KOJdYKVTQBWLFNOcEXHZCqBjF4L\nlm5rbNTvq8UERoQsrAfo5ROisJIPaUNfztQCRpJZ4ZskQXsInsTSrz/CFKtv\nqNX8xt6cp0FrV9rOqEI1FvurdgQ4sLSMwZC+htV4EIN1y9U2f/iqjBTT6rTX\nOX6jXA944zeSDEoJet1w1pZOUpYKOD+gTUDexryqktYbOnvvIZwf2sQGc9rP\n2TxXxDrtzOpJD1FRnIuhhwR5kl85FlHdmZPeQravjcg6nsBoOt9HsaULYfY3\nRPQz2/MSSiOo6BKGtXH0B0+pxIyhOeE1Cof1vkOqix3+NkzquZaI6z3xbgAW\nB7Xl\r\n=vpuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoeVi/69aGYU6+loBj8c7Vqr94Z+tYxcmeMzLEmjKx6AiBDwm0jrRMGfVdXcaQwAlcu+IZn0mKqBLrAuZCa7AO9og=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.7f0d605e.0_1616004281169_0.7515794287080992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-button","version":"0.21.0-canary.572107b5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.572107b5.0","@material/mwc-ripple":"0.21.0-canary.572107b5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-GgQJDGLvpiNUMlf4Q61Y2usLaEokeBKDuNB1MtYMIkDqu5GuH2vgKfYjemRYxK/gfgw5oPy/LqAS4Bz5Ip/CWQ==","shasum":"47f06fb62f298c72b803f03d81a981a7c6731419","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.572107b5.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+gqCRA9TVsSAnZWagAAcrYQAIpIsrVDnSnYbcEA9uz7\naQwNZNuXzsZ6XpvnR4FOZU+KPNRX33iHt4Jg22PCmARxlT+VBES2eHkXkR93\nR28copc132D8Oxsqjjui+VdxMaMMZPHv0BPnqNVPe4/tYICWAK2oVsqoVyke\nJghhqmb0cc8fEEUEoJLeLnspmNCPKD/lPok8ezl7WYAfxojcXDxWGeFSNDE9\ntzhDkQI/8y/M3p4plIf89omfDYYu+X7fllA5Z7o5Uxo7jH+swDpBO3g1vaer\nVLFkO/rtfODMxTivi7GPuhphs8EFDaYTxX7sMizC+0IhqCUhmIbUkmjuyeg8\nEJStBHDXFmNny3RP6v0PK1lupr0LTiyvHpJEeOB5rnwJrjWDlB9jZSQoa+wV\nMcTgUjco2YyuOMvhtE5AxKY1t09c1WXDMwdsrPzjg4X0QWG9PNAqYk3gtk1u\n32976i7pQCccwIy2NipomiJU5VJU5F5RJp6rIm8Z8asWXQugvtyZ5S43i2h7\nwgpNDpiJ5c9fsw8kpvKOo/ao8eouHAfL9q79vUlVQ1UvcMOsvlJVMWht1Tks\ncaO3nWCKX/MNqcT105GtHj0AH2yT7UHoCWCCROKtz2ZUaoUOZtXgA89B+/e9\n3ppUIlBIsAZoeh/Wwv+WoX70ZbiPWON/OugY2VWkMuB4XrE8xNYxuZGCftj0\nrMPu\r\n=2EwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOCcnPxiU8yOMGz9WZBDKxh+cwivAHidL/xkXgyQVBmAiAauAT/XRGrL2f/ASJMsU4VDiZDYSCT0S1OVcvL2PlxFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.572107b5.0_1616111658286_0.4518436732600779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b7b220b1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b7b220b1.0","@material/mwc-ripple":"0.21.0-canary.b7b220b1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sE5SPzuoyFIU90ZneANSu/4PMqC6fHj3pL0WWTQqjLwi/EdUB3AfJN0ggb3xXe7LdlPOU98d0LXFTO4j+KhmIA==","shasum":"e11bd34e221ebfd704de0be4d421a6fc852f789e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b7b220b1.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+4xCRA9TVsSAnZWagAAA58QAJWusReSl/mnfUy3wPU+\nkMsHWiCpTHLenvGD/G+z84aqRLn/JsUylOYdk5yPtYYfYC6tELZ3hCK6vxGR\nSkcI5tzSjRQwFVgao3hg+ft1DNVbLJqlNhStlofRTT+bGSYih2JNqsoohRR7\n3qA0aIQ9+vVa0accyENjQHZFS66CaeqDxRiWdBJElJDAdzdgfmTCf6tL3pTf\n5GOpQ2OR0OBK6ETzGKyhgGUozXz+ZDWN+zfF8ZWZJSSXnQvWPvBqaVksv6ch\nwSeqNNs4bXhKzq2U2Ahbs5mstyw81F41kyC7qXtDDFu6YWdvMgiblNF5ZmgT\ncVCThqzQ+0w1UMSZUmjjhKoyW2tumCkrdYVPfy9Opf13DYysyt9xXRLC8wGN\nqOVqnPuG/2iNhoB+Lh1uT3sBVF7E1NlQ+ZVrFY7PvejulykoDHKe/M57e/a1\nTiJpD+BuvumD++vSdi258pxBF5XQGzRXDTeyz5xVlZkcnL78p2bGCB4iiFZO\nINnaHQBcqDyzJz4OqdNbkgZZhpQh6aDC0d0/AsF49K9hjGjbcoc8zkoF8hBn\nBN+UiEmPFspQDiHRZ+9V6RbcA8uWkYTs/gpckIkUizU5ardcteU87rnin0b3\n2E5HDkjQ+zuCjVfbnaqCpnCpka1/q/l/R4OBRHCIWmKhFZQbgjDTOQNl2+al\nF0FQ\r\n=a2Lq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEkF3idWRw7BiCfMHkBIghVPfe0rhpwGgqswVEIzkCrWAiEAxGyx35GNkzZbACBQS9gO2/1fduW435HQHYmtdGpDIDM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b7b220b1.0_1616113200960_0.9886930146365895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-button","version":"0.21.0-canary.233b2de7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.233b2de7.0","@material/mwc-ripple":"0.21.0-canary.233b2de7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-j6k9BUL0dtZxuvqL7MVCBzdF3aU2O4gKRE8B19kVXAPHluS+y8pRvjG81ORdotbiE5sK0WmcLSNtaZJxrwu77A==","shasum":"396e12bd16a69bbf930b57f4c7bf9beb1ec0f68b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.233b2de7.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO2mCRA9TVsSAnZWagAAGesP/Ahp4zTxka4HM+T31hgM\ns3k5V/9z8MQUEiIZDsYgcrYNFpGcMml/DSxMyQsJrLT4eBem7gwDOG0WBlbk\nQPkU8KuhyP0UBFUGk6RXbNhKYa3uE5GTf78vfaIc3d+IcLFhhjqO6grhp+O9\nqssr9sCgESPYV7ABsMAc3M1fREWX5p8byrDBo4iL+jZ/ZRDhMkPBQF8GctvU\nzu5/h/VPgXMm7sIW0x+JsjvNuMGB/I1jfS3kybNhCVQXlWO9QIwIGNPYrXy1\nQDfgOuE47GrbNeqKGvfx0acZTuqpzrBUf6/Kw9QGwBdVwXIeA+IbAQduIGYe\no+W4iCRn4w1vCRvhNMH2RMwfqgR8nuE+xFZ+DclzuczmgyWYJbfG6RxfX0X7\n5gmRlOxAW7sFwTPEYZ/Tgh/K1+a0VD/6DcHojlAjTk+f1l4vi/tLRUXJ5fw0\nsyERGmcDoACltecm3m+WyK2VkFhRL3Us3iTsouzWG6ibfQF7u8Aq8G/8n3De\nDz5tVVDP4QlUDIUZviyLIu+qPPKwTbG0PiOf7VzgWu5pjqLcousEyJrM91wI\n8Nyyg1yb33/1QFUysArgWk7SLgy3Md5ZY8pZWwwzecQhHr1f7x4KIu6/4p9F\nxLP6NHN6YIOyelCVYHgjBl0/gitOYf7WbvbkgKT3zrrXs7A39caINbCV0ESw\nX7/Y\r\n=5I6N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAPwBGgQBoZyzcKEHftNsRY88kJq3g5jBo5Rih35cHpwIgDze3l02BUwPpxWopMM3dyB6AYheZgm08NnkoPlTDnKA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.233b2de7.0_1616178597576_0.35123942755820803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0c1a2d97.0","@material/mwc-ripple":"0.21.0-canary.0c1a2d97.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.941ca3b3c.0","@material/elevation":"=11.0.0-canary.941ca3b3c.0","@material/ripple":"=11.0.0-canary.941ca3b3c.0","@material/shape":"=11.0.0-canary.941ca3b3c.0","@material/theme":"=11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Gd+knefmEjta8tGJCo7Ypf+kpgS5iP0zOhz19KV819Pi5VwZSHtk6tqeqaEDLNfiGg1q49AeWzijZVrZWc10iQ==","shasum":"3983b5ead53d2550b548acd38faf30be7908a0e0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0c1a2d97.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXNCRA9TVsSAnZWagAAt3UP/2wxAEXNX29uxwWEeIJt\nJs2TsaEmagiuzknZqF5hiKUWijLaWmu/++TXfa4JBG1ig5dIPIORj2zi9+vk\nbLcmKz22DOkKH7T22c8QUTnfBxdrW0v8keTRgQ1ovYGPcfydsmjSJwm9Muml\nM04td1y15b+XYXu8aDqtfan/w97fHWMVE46M+C2oLdAx7jr52IxS008JckG/\noPjWfutBcxzDJKNB4KnVolyA0g4BB63IKPxTS4jd+F1+wnqhsQu2MHBj0RC4\nGTNOUOSP6JcjolOnpKg6kFfNGjk7oDdY3D68gjh/glvzTnUx8w33HPRBgaNM\nc7FGBxBVb0er1ESTsswJ8Jp18Bb+rYU5Js7BiCxfHyCnPfz+QiaS2qfGzzfr\nOMlYDH8DP3mypbOzVojC6z8EXRc3xrClCO8RZcKw5teJGMthJ+YihW8XPCFD\nUr+WGBo4Izt6mcJQ/Hpz4+60hqo37c0FIAK5Ls80m/65wws6175PSO4n2RSv\nZmLbO9T/5vOZhpGoOCbxKWbYxlAaGN2KyTLdM+9XSVeW6/yf5+24qpdJ3zku\nrxWjPPBOZ+yF4F0J/EEFgWTwDxoVzkXAh6+cwuNdtoAgrf3HoCmifTQirXDm\nJkVck8MVVTt+OWzyO8IjlTAwtd1SWdVbGVyhJgjvgaA1uGqE8fu5h3UZxY1/\nrbs/\r\n=TVxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICiwoJ5NAOPqB/+RZgwk73zL1y7Mk+SOPSp2PDa37podAiA3CZD4CtmglJ/S1TkHfrfBGCTgbNNCa45YAD1W2eHthg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0c1a2d97.0_1616188876924_0.696618586353924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-button","version":"0.21.0-canary.57ca2e73.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.57ca2e73.0","@material/mwc-ripple":"0.21.0-canary.57ca2e73.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.5f0fc444a.0","@material/elevation":"=11.0.0-canary.5f0fc444a.0","@material/ripple":"=11.0.0-canary.5f0fc444a.0","@material/shape":"=11.0.0-canary.5f0fc444a.0","@material/theme":"=11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-I9lVcbWrUNZtXv8FgyXEfetIx/mui4RX3OzgCSxdCg1jkNOkfi3HkJ3jY/EBesuIpeL9NbUCQxH8UYXK4mO4Mw==","shasum":"005585ca945d3a2eb1520192cc8d5a373d750313","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.57ca2e73.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSh1CRA9TVsSAnZWagAAmkUP+gNnjPrWHbLN6DhJr0Bw\nraJAV6VWhxyx+Zz/BJ2NJfNRGKBUFg2D8dImYU3GwWCNPHscVUArpCqgrB7m\nwrrx8kctkCtNsmDC96MmHfTpo9zMEgQ3nXiDENE0thx+7qYBkzQrmePTLZVn\nQLjKmfWlaBygJnppSnTzEHRjpAEYLITR3suJOzOte/Xq4W2xEsb+lzrlBbqc\n8qTb6CAGWkXAOGuAwh88p43Falg5sRdMdoU+gXJRkP47WNIN5Rjf1PsMtGes\npKQiFJY+qywtLhPWYztIPFkIdCRFuYrl9UGdw5LcF4DVhKfaXshHf54eZzfy\n+psuupCU5WxU6+tXnwln6mJusiHXVPyaYGSsA2XsEBTGb0R03tpRfLh1Gi6k\ndCWFi/QpWS1yGQQKhX2bUhDB3UxoKvAgaAxGY6FBCmj8O4f7eQFX37uLvJGl\n/a3726v5xbbF+mNcmOqmz4a9975mnZICkqSs+FMerQbZEEObNitvIvaHlmRq\nL1pnHl+5ipttyvSPR0T2oJSNFMe7gdDUfMMEE3N3Czg2i1+og8Rna3tZfwuu\nsOZ4pQMXnd4KgD6AMygiizetdsS5LWHgNsfpD94UHZo3b/qKfX9jTbi1rQpP\nZMAieKThqa38ktZOdST37veF0Ceu031yOv5TDPoeydTUe1G9lvttTfdIrf59\nGYJL\r\n=umMM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL+GFI75d0VBDqeW9pCgW1auckLLPPg/lWlCkBUKrpaQIhAK3ub14wL9IJgUQR3/w/jaAFc4sCGXDuN9KbMIFphJeS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.57ca2e73.0_1616193652596_0.011924849020716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.5c058f4b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.5c058f4b.0","@material/mwc-ripple":"0.21.0-canary.5c058f4b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.8943b991f.0","@material/elevation":"=11.0.0-canary.8943b991f.0","@material/ripple":"=11.0.0-canary.8943b991f.0","@material/shape":"=11.0.0-canary.8943b991f.0","@material/theme":"=11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7q6eOsjGTF//qticH3w3PYEu3dyDUPjdt7GK2FnTN5Vdp7FafEeKO3P7RTLLF1f1aj9ANGDV9+y58VliWAgVgg==","shasum":"9cbc35b12a724786a89ac2d2581cbd040260a883","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.5c058f4b.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnTuCRA9TVsSAnZWagAAgTcP/Ax8IPkHXHPManKqMLdW\nzYm+7FZUwfzRl1dT8jmJOEYDkCzf8KLa4lnBiiCvOSJ9a6pF9opR9404Vceq\ntfH12LI/WJnqeYxRGZe1UdaFrY4xHQty77U6Lh4cybJ8lc56A5cPGabLlmMR\nKDiUAHoptWa43VpZOy0jF7P2qdn/HcZh3b4owuL2WQOL+5pwZx3TGPlx4anK\nysKrOncflo1vnK/MGSSFo6p7BDyk57nkP3cVJt6RgEKqhrYRSaCRNTLyvSFo\n/dHfSyXJgBdnLwn47A85l3wHa3ceyZjwsfE8I62cvzqZy7BTaVxwiiYFLnX/\nEf6O7DCasuHZD1ASBoE5VhJadGehZAkMAJ5XaOYmMensF62ns0oU1jx8IY2y\ng4+RXRiLIs+GMhUIqAlMwYMj8P2p+Wyoowp4TFcao/Kq7TyWDqjmMMStFfkE\neqUzE24FcyyOzhiMBuTtPvVZubm92xrGesZxYyIZ4099knYgn8iLChY5aP3S\ndwaepLCLHYNEWz84U5YDlo0VQ7eh91XdANShrLwtNZAaV3/fk94U4D9i9ppC\nkzaNO0aaMc1/wwkSkcDECvURDGuLm4Q8rCsKSEw/t4urIaFeg2mOcwHrmcUA\ncUOt4OpB/vj65ensHHRqgrXujTmVsoEC6BM6C6aOPVcLbK+cFqRYn7W4Xdya\nXlBo\r\n=fkAq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAZGWb3U1CVNY6O5vIf/TCU6cwD5VffuKhZx1zZ8wrA8AiBdv1iyVDZvha8FJexl8cQpAuaW/2qUNitbynM8wJUnfQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.5c058f4b.0_1616540909802_0.7553817910854095"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-button","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.e27ef7cd.0","@material/mwc-ripple":"0.21.0-canary.e27ef7cd.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-W8vgq3YYuRGOHJQeYMBj7bcC8cT6nmjMys1+xePP8IDqvK81juyQouuiDuHm4AL7OYL0Br0oHvlhhFlxPpMyhg==","shasum":"ac46e41a5ea2cbab54d4e907e331c56e14ff3448","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.e27ef7cd.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4XuCRA9TVsSAnZWagAAWKQP/Rg50ciF5qs3YZcKXYFR\nOJpIIGlcRd4VuI/G2+MohANI9N3p7rUGTUPHxj35OQC938CAVQr170ySnD4x\nhqkXh43slb7/9tZIHTDhxsXjBGHbWcPgH/vTmLfB6n2zUXUrQpvOYQk6pxWl\nYNNqteVo6LcGmXtI916WyqcFQjWlZyLPopYJOLQ3CKi7xxhWjlhvw2MOUs/H\nZS3x+o7H3B3ghrNmmmjzL8WzrSiFAPGVvyP5WmqAjKvZCVKJ3SM6cX9Azmc6\ntZN9DcvaqCMMAFJ7NfmJnzgXUZG/XIuxc5AaBgfbyW88B6DvqwonB8iw1PsI\nAZ7iPW7gCzdeMwSCe8FDSxRsbEvayAgmdHGh2WDz5ZmFGsHHxSBiucGCoklm\n/8HA/QnumvJYPjmz77bPCW4jw9evAHzE+D9+nyPdFgT5Q9z5ScLudpnuJZgG\n8wKClLk4BfDWD9fW1n0fWhDKnfdQMT8S5Pl1OXB79yHL8rgTB48ZXejrle89\nZiVs3O3nzpznwJddeZF05H7nMSHnViQHmHWDC884XozmOCNi/861tAvJHfz5\ni1OKQMVEHsHi46U+PPSrd2zAx9ELdM7rtIiNQW7bSTsP/XZnmyB25EYJrEbv\nKjUiGY4siXr4UD26qgNq8Hb7zJETzWSjIRkod6kSxV6GRL8AoUPleGRz9Ez/\nY4ee\r\n=7UzB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqSdEUvaKg8RadBBB7lmwfu5vtwySuCQ7O+PljpWyorAiEA5W9Ds3hJ1mcYsNNefV/Fd3vUOeoXbzODaeH+LvoUgNk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.e27ef7cd.0_1617135086307_0.9311730915427763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-button","version":"0.21.0-canary.15c09e74.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.15c09e74.0","@material/mwc-ripple":"0.21.0-canary.15c09e74.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QFIvh0Pkc43yPi5pD5EgjnKoNGuz4SuoqTFVDlWQQwZvWEmxrpORnex0FtxcqPSaS5aRLDt9yYtfFyQKzA5/Bg==","shasum":"28b9cc0a36b2530c7e998d7ad67f699027ccbd0e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.15c09e74.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKexCRA9TVsSAnZWagAAoS4P/iaMCoJA0hD96iF9TKie\nRkRN4k+A15vDa6NKpEGGdqkXzMGQO+2LTT1EGVQZqBo9oXIp+NgZUZtJVvAx\nmOe9kmTteLUTBV8QowLxN4dYFbhMiFxU5/RI27rE7LTo61eCwTGNkeldCz6m\npv9GwfH+KBH5KGA6RZymOuqQX5SjfJ3IiS7JyRa8k8JDst5WH1qBR9BnjnOg\nkPxZ2a8vVahvWQ7qJEdjp6Q1on37HI28NrxeLQUPgg7/uSV+pWV84d90AOeP\n+4Re0z5HYUTRMZ5vmne3mE85sv97XkN6GvJpi06ETf8/b+sMulEaQ8H+M/Vg\n+/R2nNoWsLmsQKLo1fFGCPETkE3uyBstZ2aZPbAyDh+pxhdcKzYhUnqNIQX+\nH00jZFLeK4KRv27YGk7y3gkXxEYemDnurgjO1VMli1G4chte0NdittwIRjMU\nD0KeffOKdf2yZwYe4RvExCVVJ9HBt+ePy2MMaoHgSEfOEa6/avmLGzEW5Gcr\n8/rZgsdLbdceo2QlycV7buZr1o5oYzmyN/UN4+f7Ky/+EBCc+OxmP4sEaw3B\nYMT8WUujoCFSsbcx/zgj2QhhXFhwZdFIzMpohk4W/L5ruiEUpbN4jO97iJoq\nRs6EwWops1zBAEGPuwdnyPD6i+aUtk5gJufk5W2rJqUYeJri1TpjoR5zoL/t\njFNR\r\n=0o0/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSe4CROr8/c48iqa44L5Un9cDdwvbbLyvYA93jYQnpzQIgEt39OZiMqmbegffrSPk2QY0rbl3d298J5maYL1XOb4s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.15c09e74.0_1617209264772_0.9951864836131983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-button","version":"0.21.0-canary.4dc32be3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.4dc32be3.0","@material/mwc-ripple":"0.21.0-canary.4dc32be3.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.dc9c84023.0","@material/elevation":"=11.0.0-canary.dc9c84023.0","@material/ripple":"=11.0.0-canary.dc9c84023.0","@material/shape":"=11.0.0-canary.dc9c84023.0","@material/theme":"=11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-PjpPa4/yczSz4YSV4vcbJFLRWwAUT+9FMOrNbIhuMJPlXRwcJGUKSVmz6jl9Nem0e3KQPXmrGMCRiYznXXIT9Q==","shasum":"4927d4c28384f82258afe76abaa153cf9cbfaf49","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.4dc32be3.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpACRA9TVsSAnZWagAAl1UP/2DltqBq7IBQS1qyax92\nUxXrwTfFSWJnWCVrGOYZCpS/vjubbA70MqVhVE6kmx7jO/gNkp14Us/3++i/\nOVhgKwnNSvCgsxjiBuk9PD5CcnCCQY5RocKhVrnhu04s9/0AQhmOhzTRYHAI\nRg9yFOUuGDkDC8RiaiFG964O+643txWOTVKUCsxy0S1kpHjZ2HFEnSqbXz4+\n8rafeTYfE4A5Dj4ARIWeJHpVfsQhF14TAS85iWm9g13RwDQXUoe96C02QinI\nVSIhSG+JzZaXhxcM2z+Sf9QqHh2JYajRtMEg5ne/uk7D7qOyVeJegtDKX+LE\nKT6qNqMNhvfvcHCk02zGiIqA2OZrqxOk48ZQ9A5Vc6wAfNF2IZLHqe+gv0ZG\nUeZrZvR7oagWck+DeI5VQ3IU+LKHtNeLPEQpJdhPD8vH1QK6tIdvrE3I4Obb\nEjW98c8Df+FOoutz9Di+suVcBKL4kJ24wZbL6qBHA4dxXT/xt5N1lKAtnC3z\n/AzXyifalfn2D+xVDix4NXHiaW5aXyOeA/ddaWua1NwzSmDA+b2C/DxsnvE8\ny+Av9NpMzNnjt9ap17lp68SrN909assz4ImEtBXhzjzBRLecZEKy+4eIsElV\n5BhRlaRQ7mjXCrStFlbw+zGRAAxcBpv34sy5qnu/35QvL4BzzLlWBg+vIBmQ\nu2/N\r\n=LwTD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXObVFj7gCbd+f8A0QD/6eVUp8WHDZwKE9gHG9bTV91AiA4nOx6xQW6u4F8KQwEdM9bZKXy5zktbmNq92wOnwtw7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.4dc32be3.0_1617234495980_0.8608629593410679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-button","version":"0.21.0-canary.4b717f65.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.4b717f65.0","@material/mwc-ripple":"0.21.0-canary.4b717f65.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sEs5WZFFFOHF7mTjRazddiyhjcmCxQQ00oYYgGJ7xWtQVdRbhsJ3WiX1R++kMYljv7IUENpVgu/pjVnHyB8sFg==","shasum":"f6fc530c2bdf7d13bf658beb4acf5d979f6daedd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.4b717f65.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2ECRA9TVsSAnZWagAA1rEP/i5OdJv7wbJSCXf/L9GN\nw6+fRpiBABJYS3UTDxPVUjY5HurPOcXo8u1tuZpDVUUzZd8hSK/CvkOL4zUZ\nG+MkD+RVMPNW7G2Tkj3iiUT6eft+0msfwye93UXfT19bJdm1cPGblbw80XaR\nE4XNJdgCRymGZiM5G/riyzvB0BgdUB+tOP7i+jw0MhGkB8fACiQhybzMgF2I\nHW7U24auxscHdhEEVsLL0ZoSVKFYToBnML7dnux9plIl82E7x4B/CuvnHnAr\nAONOxTcVUopyxy1N2n2Vr/xUf2RwT/TZTmvgw5QmOuNJ6M3UxOTEtS0pUPJz\n6qp6EvmyEmivfDw7PjMq9HgnsPCpQtrDfIPGdhhMFfm05eavdPquUTNW8nYa\niFD84cuQVOp1DSyMaiwGiu41PKnzwcpPQrRykqB1bHR+BQsVhL5EmWSo30gO\nuU1TzN3R5ZvvvxNDNNVagGPRrUV1/QvFpZliYAomgLSfM6KVNnpaX7/CKA9L\niem2KABEZ3b4FO0Wl4sl9K7f3OZKcOH1CYMxiLOlgVgU1EUyKfyYilIsGPJR\nILDe1qcY5A56ivffHLe0LMuDKErNl3r2/0bVZDjDYZ3OdU75QTsP2/qFy3WP\nbs4MUcX4ojdaUC28EUliU+F2Q79DvbK/3JCORS9LacxPVwiovvPCRly2+bS6\nScqx\r\n=7w05\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMSFTVWvxFh/PrMaz4AcSH8OQNgky5YsUZv35r6/eGtgIgLlzmIkNHBYrSxq5UydAt5pcovF0Ay5mGZcBzbsPQ51I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.4b717f65.0_1617300867343_0.7176908163588867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-button","version":"0.21.0-canary.c6870f20.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.c6870f20.0","@material/mwc-ripple":"0.21.0-canary.c6870f20.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kwT5bwRJEv3HzCdRoZ1l6sedipkdmWhCpwArqmDrgEA79hEeij2ngiCNfwCZk/Nfv+KJ6CkDwgHjpJEh/YFw+A==","shasum":"abdd878e12eb3f7617148cf26f541661ce2690a0","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.c6870f20.0.tgz","fileCount":20,"unpackedSize":85521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpQCRA9TVsSAnZWagAAajgQAIDqrJLlFge+sq0qxoW1\nCzwZKtuRcKHtXlUWheclD2lpJAUQ5ArvB50g7Zs5P3cCvr8tAAuj+6Ma8jXM\nCBQkZjSyeDZlKc5UgvCuuU4NRxJnllYUiBbrHuyDs39Ag9NIVGIblpWMOfP7\nNM2eOF86TurMWnwv2ANC+6HT1buS80Dch9OOsA5i770pBwvlLXTo3Bc+Yie6\ndQyXX72s+ttSSSFhUZ9MVbeOb/vnnyNTBOimtgUcYtI8ONaRpkwNuNLitRpt\n0T0BJWYxClkyfJJcN4QA8YwRb2AEpLiYx4qNhkEYPAjReHME5+CU7GK641X1\nkT97IsP3gIAXGa2LgNgk0T/LeItSqXxBTbZu6mFk32+3CmQ2UTN+CE5HTMxF\n8ssQXwzlJFHcwMBjNwL9UYM2ca8uEmKyll7dgGR7yObILoBVzXtrbEWFVsJA\nVtvP1YHpWTlB0gsr/UkXe/Wx31WpsS90cdEFja0j/6jG5aaMnf7SaTM7xFYe\nyrU0B1sPvhB1RsoD8gyX6B+acnoRm0NST2y9Qjb52HGOBTK0B+7GDMmr8zXP\npbwN07NlaihpsOzHs4PTUr5+f1T0qpsGJ7WHofgQt12yYMCkUGI+vw5vOo2C\nYcURXtvEiTrMpLqQFqAfATmYSyTWtwvRrlvXRa0nWrBnCbyEpEpCthdvJkRQ\nwFXj\r\n=o5HL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7gdJzNcuWQo6hwyR6lQF99HRp099zP0A1SdWkDKFOrAiEA1l6Ubd3RUpsaAUu1ZZAESRJY28aO81UCmcQ+WQ2S0cE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.c6870f20.0_1617320527697_0.5217943380966876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-button","version":"0.21.0-canary.852f873c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.852f873c.0","@material/mwc-ripple":"0.21.0-canary.852f873c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-reE/Aj/KUK1CXCAOXXzd/s4AEpXmPQEJ2Yb3zguaT3lblsa8Hq08phbLZxTpREHKSz3xSlcEcgVLp+7GUUUBcA==","shasum":"fec2c2769ce158500b2acca4e89d0f1f90532ca3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.852f873c.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoDCRA9TVsSAnZWagAAUrEP/Ay4y4Ihdj8qwvNNJQ0f\nLSurWGB9u9Um4rbK2RU3qwEZWC5qDf75cErwu15vfgR4fqXowhVH5NHBgs4e\nfKN2oAsLLrUDYoZCsVdJqUASslFREDfefP3BXRLIPflXez7PwhCQVJNtxD+y\nWyk0jxcTQ89AWE1+ewvfeS1gIUqFQg0MHKjpmP9zbFaVmkSV0g15x1hEzLfg\nLQPw+E/+i4kp8PtYmv7QuRfIcPkrmbV93+zcSgGCq1kIibyrL2/V3dl+7mLV\nmrQjbEUGXpLeaJehoOwxwJ4LVWyp/+WOxj1VUtIv+H1po8avHfO8wRWDE4fZ\n8J3dgHceMkEEBrfbnO4w1rZUqzABFNOSXq8dGjmaatsmo433MQ/EnIPB1Lwt\niPSgUAtG8SmxzT8mmN2r0VV8Ne4f9W+UHboAh+m+9l7THNDvx1o0GxA8gfo0\noXF8S62DLuc1eAtHDlmzTWDEg75ApTEfdiFd3Ycni28gJaclaPD3peZauO2A\nNFkFym9z+7PPKlZb/oRkN4tlAgVbepy0aoxSv3e+bpOiN8ZDcHB6yqSB3H4O\nwiZemWfl1uDsIfNoNtbrIG47iNHCw+1iq8TuuThmOYkdey7TFnGAMUBoxT8h\n7mp+O7bUQIODrJ2+JpvOL01/LfNZibebh+dCM7t+qwbTe4pyXKvIWrl6+PHb\nQwIG\r\n=/LkO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDekSG5UsCUQnEa3IU063uU4jvKSreR/M4Yiy1cqI/LxwIhAIfiRI216Pm4prwH1dY0V4JLXtVLhtzi+0pcyTr6v/B4"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.852f873c.0_1617340931458_0.6797457937836042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-button","version":"0.21.0-canary.4a674a1d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.4a674a1d.0","@material/mwc-ripple":"0.21.0-canary.4a674a1d.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Dg5zOGlUyETaa7OKWhePphp0lKKr0xrC0sLCDuSZzlX9+iBgZOp6/1lE726eiZkBVpLmCo0/Az1O+hSrsESaKA==","shasum":"337c20d199e5287d9e05d6c35357ce23e4196eab","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.4a674a1d.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3KCRA9TVsSAnZWagAAmFIP/j0hnEv8nxVCCA6cFidY\nVLTY18gEQbvhJeu32iYslvrwekxIM5DbwUc7JTTPPSVH/aggEnyiG8rzDx1Q\nWcJO/biEu4V7CfC5PlVQmJvkQ3ipqsONVzcYcb1LiNMrd27UXNkLeSk6rHrI\nTxRhcHJaYrM+mVssvMDSzGtFLilqxN45qjmLx1QWRxQcsMq6lfmQb5eF2htE\ndJuuSO9ebvaWj2oS6DMksHaXm5CwQeLQR7IdRwdzZRGKeY+1JHJP1BKlFCmF\n2P4ZdGljW0d7qwL05jmbWKPIC37p7ahIRAypd3TjRLY6nzbVuL5OYFYz8RZo\nO9lZG2eL5C5iIahXGrNG1Y1D3nWRBpJjHK9bMz0LVcnSeheW8wV3r3tN20g9\nq+sOT++LOs/+elzFrjku405u6JxgVJ30GNpIgm35dcBxM2KmjLBrYp+C6D96\n6WXaGKcC3qdATnbpY5409xviOS9P7p3reEdh+CSV5QEdPpF+VPODryObSTxs\n3bH9X6fmJA8332mLQEsMjqcyHFWAtgBm+LpyywVxBFVYgy4of/oCyNpxmvQ4\ncm4RTgk7FghpxWk+zbFnBvXOSA2GTgPgiMtlR+4EzXRvcrbqikqTVRdEjiCC\nLMew0AshxWerqxk+L4WoVXKbepl6vGun4vTKn0rk5rIkMJlxk+JyZo/c0OOp\ngb16\r\n=yAft\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMOAlyo6GbYdfsQM4aRkGpW6uNrWIYRvmSgxxcHaTZQAIhAKSu6XF1BrKtpbO4KO+0ZCnbML2BTQS+VOM/XQME0oWa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.4a674a1d.0_1617374665551_0.42290813560789786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-button","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.c5b29ff1.0","@material/mwc-ripple":"0.21.0-canary.c5b29ff1.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.24609b822.0","@material/elevation":"=11.0.0-canary.24609b822.0","@material/ripple":"=11.0.0-canary.24609b822.0","@material/shape":"=11.0.0-canary.24609b822.0","@material/theme":"=11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-8DDFwXxS6oWn7wKSOoxdugtINQjIPzzxmIOnQ0o9yba4iGWGGYR9kHe9bSRru2ih1SNiEle48Yuml+jpY2Sr7w==","shasum":"0d92fc2a08b48dc82bfdbca4f60f8d172a3616fd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.c5b29ff1.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03LCRA9TVsSAnZWagAAPHYP/1repnbcLLzEi0Z/kOOf\n+6z9PjF0sbvqRi+CX6t4eCWU/jQ4ggz2SDNJjIh7IMvuc323iu9xqSnxylnY\nPcGxv9h32/gC6vq4kg6VaJFNWr1/lj/yXpZGgKkRmyPy6ZJMKaPPGVBMf8HN\nAYYrsbXElDXIdFTWmTp8nePXL56zMdwaT+ML/4uP80d3r+FxxMArvef5wHTh\nwiow9p/STZVHh1HiPYr61iPEDbMzsgDlGrW50KJRrQKuhrPvOyId7+Q3iUU/\n/jT+Q/QBAVB2XqMUgwdtPSTob7AkvNacSJjHI/2Cr/gEVaT+6+hW9owhXqEW\nzgga/mLS3Y0BdcpjYQMQ5L/nEVSCKMjPDIsJEqAVxNbKNWL3VqsybkaKqnZR\ng4X4YYy+T2+Su86D+ql9Mt1X96CraQPBYn9JOl0nxdA/0Xe2SISkJbsqmubz\nBOm6XSzxxOhTBfIzglZy5zFDAcnpFSM2PF6EUVEp6haDQliXptpobBa5Fyor\nDjVmWz3wgzliMp5m3CRDVTUBx3gRIo3InvcL6Xxx22Z756v19au2HUST94hd\nIUw7+PVY6nZTHkw7zbUbJ6DDsoXRUA8Z61XPmXs8GJtsSvPcudEgQEkQxHj8\nB+NC9Irbm47O9CklP7imCHXbzJUtS8eN+l2xbRh+XyK9dz0Ojmz/QSXTD8W5\nzzMM\r\n=KiRZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDb3T0rOvmDwr9kDQLyLwIQIzGQYUqDGKo7moCNRlwuPAIgMhSLenDuDPW6nP64MWcTem5p3Se9oamdwiI1D+xiG6g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.c5b29ff1.0_1617645002806_0.48424979505747934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-button","version":"0.21.0-canary.583644a6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.583644a6.0","@material/mwc-ripple":"0.21.0-canary.583644a6.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.94f50b260.0","@material/elevation":"=11.0.0-canary.94f50b260.0","@material/ripple":"=11.0.0-canary.94f50b260.0","@material/shape":"=11.0.0-canary.94f50b260.0","@material/theme":"=11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-H8YaqDU2BPPc3iQFv8DPa0MUs2i5dumIwTyZAV+U8L0ZS7SLvo+U3nns2WFGCbetYLTFjHavMbH0Esj19uoWEg==","shasum":"bb70fe7c5024976e1789947c4ce41dc4625e3919","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.583644a6.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04JCRA9TVsSAnZWagAA/h8QAKQQodEJjBrITQUIWbRE\nrEvQCBI2DajmjH0FGm40OUNRunyG8zR/Te5EPiFBM2W+vwy7+9J8BKT4F6B4\nhURPuEo0MP/kea+CwjMklVSuHvzf6xUke8XAw1d5atvSNWsEJMjxFzUD9W39\nWxJgmI1z8KT3TV9uQpu58I5trdmrF0xto/EtkdSn+EHIbK+5GqzbvCvvXf0b\n8+3vnjd+uCXcZC4++VyxmevhOMRd34JEiGMT4A2AEGkzktSZU0wYVxNH/Ttu\nEdDaWc3rdAU4h7+jNh4Olo9Fqee4uw0dZj1hfrlXunkho/P+6i9gMZbts5ws\nv64ugJ4azKsHcMlz37kuiLbZptc+xWMyzPt/cr2iWhnLut2mjwfjubhKxAwf\nC1OLR2+w0/LBAd5nV1AzPL/sjc865BU+diLD+lapPmLvJrUXxl/FUwZCF0Xd\nxB8/3PdRYwLibdX0/+VERXOICQTKLebtRh+m3JAt1uYg3nzlI6kFqXiiokKc\n9YCPC31RPALVOC7ygJsAVPb63WMZdLwMVwFRyv5QLHp35a2W3cWOvWggVnIY\nDXCzhSagV2R7P+oKiXaTwhGHMntht4qe4UA6yOXoZuFSOuJfwPXoNf0pxVDN\nYlQzxyK+bY9eaLXcWe5HSFVu1Hn8T54jE7lekfVpUPw5Ryf8aOxsyAxPHOFF\nawRS\r\n=4ckK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZsYXXb72qnc3ljHpKEFvkNPU6QeZqnQXRnYi6yVUFHAiBjoZ+ibwBIAAFen5NVbMHuQSHUYrth0uvjseddNzkBTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.583644a6.0_1617645064916_0.6437354615754773"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.02ac1e6b.0","@material/mwc-ripple":"0.21.0-canary.02ac1e6b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/gmpjHKF28uJx9iVObcEFmmzbR338NnFOsVqqutPHU0Inwzmw7B6KRccUk3SUMrrKL1knYGqGUioutPfeC6K8A==","shasum":"6b198529a29cfcad1c57c92af0e286e4d7e7398f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.02ac1e6b.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKomCRA9TVsSAnZWagAAGHIP/2Eij9lRibmgpg1lTKoB\n5kzMTnC2bW/bc4krch3rP0fAJ3Fhcsf2IkSm3VquiijdynW3lhYfmSpK+LUJ\nXH4Ig4pAlyL6Auqb1gM7jCyVfncnIbft6r4pRSPyqDIDtvAu4lV5P1FpsGEE\nt2bg1nSF21rjSawyhGTvS50uDwLD+HzeHV+0koDWojMIYeukGTCKg/utrZB6\nZAaH0YQV1Lch3nyGhKWMczRDkO2d+dP+RPthls5UMSmVu6jg9aU4HOAm/xTA\nnt9coQkkbm2xWNDPQoBjwcue41lNN5bb3xQmNL/gP/IxjaThjGu17YsqoFmN\nrPl8mhZznvvmTtzFZ58+4doMwW/ZXqDSLiTO3UXQR8xO0ooBJAKBFgigxn8t\n3nvXhYsH4Hzp1mz64wmoaGZRiGu4w+Qw7xXJlJOioyUrXuIniDeEdb4JJlao\nSmwGZ96d5ZmaYdxN3rQjxhNAXNi6SmVkIcxt8k8jpKqjnqnS+3awFuUhsEcV\nUcQW22K2ImAUxCwCAb0Y8qpZx6VkEgx273ozLbOSpVMfDUR8q84vndi0TTFl\nOvMY+FI5GIsp1JccQekeo7Ok2uCuPXnfVXqdpDlkTyLFQMOD+cgitAapW42r\n1fPe4nawkhB/mAvW/4d7A4q435rIG5dAHkXW2eGS9UXbIYSiq0vuZsDy5Jb0\nh4eU\r\n=Ss7B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBc1zl3NpARXCxI1D2InS7ggcjlfHNF0k+7b9b1tUYx8AiB8YQxB+4wwzt5nFL3P1OgQ0F5JtUf+F5s/orYMH5+YDg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.02ac1e6b.0_1617734181595_0.9610645482288658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.5ac5856e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.5ac5856e.0","@material/mwc-ripple":"0.21.0-canary.5ac5856e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-y4xbNw+OQ84biViKtKwIFzT2xof+gQZOj6z79bWAYyqQsZnHXFZYOfVpSopbAG871SFFlh4DNB310fRkaanUlg==","shasum":"89f2a8a7f9d474dcc7074141f9cc576525d32127","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.5ac5856e.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKuiCRA9TVsSAnZWagAArqgQAJMmVugqichX45izLJgd\n8xSdYdZ9f1gN+mjL4wGUm+Ba1QwnZhYWQVLf3/xJXFztEsCXxqVxvKDvefrh\nIVVoBO4R7AR7ZMT+OSJYtomn9tl7b0YuJh2GoJGQUeK9NODZqADBWh89ZzFu\nUteeadgsnI4ip5C7mTSHAFDyR0CXOJOgKSQtwreXxCN7gMsBZLeZvzM9FDOE\npjer9+oYgjmR0W9Lmiz9QUbi99zwdi1yhhNer/hTTJZ1k30whAuc+fmYvuyH\nFY+At9Ma9+vY4UnCmf71YWkYBYO8bPD5cTMQe1cQfraYkTynZRg1av0Zfw11\nDY2wX1FH6sXqeVD6JR6aftZHQp/6gKx4FVOrENyQJtqTCS485bpWFap9zfgp\ngCjGEXp0VF+t2fKD7yBgaFlx4Obo+hJOBEiBL9tIkiX9B9g+YnWWkUf24sR+\nvdum2/xnNp41yzlk+qLxCT+SbcyB/ol9Hwu8JqKtxdR1RHiikogElF4j6AvA\nhtLus+NmSUY6ES8ZjrL5bEDEFRf69GWe85e4rq12zGA8T+8d1eVsTW4I9F9n\nmTzPHO8kCorBPaxeBDh4Y1lYO9hxeI/bEytd7sEPbUnKdiUlXaU+0Wd7MAbU\n7UK3cW2Vkd6jmRYAAv1cn0kHRYnvewni1x62bk/GOouiFa/K0bazRtuaNoD6\nCWBF\r\n=c93u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIElF2gAYhE/nS4GyPxn+EwdXA5zCXdb++M547Od0ipIWAiAu5KspzYIJZnIc6KSWXzuyqXPvGSJ8bdc/y3YUnlD6pQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.5ac5856e.0_1617734562119_0.766486514798437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-button","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.bb23dbc4.0","@material/mwc-ripple":"0.21.0-canary.bb23dbc4.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.15604bd0d.0","@material/elevation":"=11.0.0-canary.15604bd0d.0","@material/ripple":"=11.0.0-canary.15604bd0d.0","@material/shape":"=11.0.0-canary.15604bd0d.0","@material/theme":"=11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kInRKlYUKEq62uYIE57GLmSuXy276v90dykGslC1y4aSV2deobTl9F403rJsKWUop78DRPzi9vian2ORCKTjKw==","shasum":"672c9cdf6a43feb57d79f6492a418ef90ce30dd7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.bb23dbc4.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiLqCRA9TVsSAnZWagAA3tkP+wXsdsN0qpLoanvVmJ3q\nx0zsb50DiJ8zPi0XZ5ETUgnotBo1+6zQ5tuCI8YmLYltj3YXRp7v+jn/Uecb\nNpMinx5QtFlNbPzdL8bDGVwhatWXEbyXn3JqGoUw0wsEY4ILksu/pk768pzh\nJGQ1xaF01MPCkSGrzN7o+cEaKjqQ+2hLe2FrpjaJ2sgOjyaMRczjmgm5o7qD\n+EzNpqRsXyNXgzVa/72o0+CEmd9uvcCu6tcb0SvUlvS0eLfueFbZU8tw4NSL\n1JfpuCjBWAg1NgNdHHYfW+o7WeTxgx/3oVc4IxH9veIGCimbkvIQ6eKq0Gth\nJxqjm+S/wKjR8LjF0BVNpIhRqcQ9Jxt5woXd8fSbjPSmiiVGbKLyl4UPRgrV\nm86sjRnzuVvDySOt3XfG8/wPamWuWjrecLLhNNe6JYTpOfNbx9FMWm6yH/V5\nFkVWQ66P03fssilgnvmJKqNwosgcbvviXscNy+lcedg1rTi+BDIfkAGP+KUJ\nyVjwKBok5VZ1QgpcMjv3YCc7kcaldRrEoM3WNZHiQ9pgMvNVgqEZs6rriSPd\neYGb/lKVxMhiLbS0KhMUIQ+rRubpxZhXwTGuZEwz1IjKaYMwtR3l2sJ2UbeX\nNe2W2aJHYXLntQpin4E/wHgvPMLuMNgn20iwoR7R5NGv/FBiG2hDJ8ufuXXv\nr0cZ\r\n=MSjz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDY029SBOfKDe3m3uB9DEKTsEVYg6SrPE8TH3pYm8SnHAiAC41PU7HJJ3IA7qQ04JwWZqQ5Qtfnu+fZBtfiSEto6eA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.bb23dbc4.0_1617830633458_0.09211332727382615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-button","version":"0.21.0-canary.e539904c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.e539904c.0","@material/mwc-ripple":"0.21.0-canary.e539904c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.c91e8d141.0","@material/elevation":"=11.0.0-canary.c91e8d141.0","@material/ripple":"=11.0.0-canary.c91e8d141.0","@material/shape":"=11.0.0-canary.c91e8d141.0","@material/theme":"=11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-S2RM62Rln2UYE+WCeE2ENRtFnjmEApXcZYbI1W6oT941F1oR472ywQhcoqPyfR0amEMUA+lNyr6CVTjPL0MbyQ==","shasum":"32582b694b732316e6e8430f737142256a1aa134","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.e539904c.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UbCRA9TVsSAnZWagAA64sP/1zn8yPy/FcoFAjul+fG\nmN/V61+5scyLE16OO446HVdB7cSYUKhzj/H2c9c7XPzaJmsz2NAb4KhHGgE7\nbUJ5xl2X7AgYcCJzEcRESviDbQkq15vDh4Yt5dSk3E1mtUNL1e/S33JhQ3pc\nzvK0k6cq3TRcBgogsJEUQ0DuN9ZOL5S8MhOE7pQ5/bA56Jjo2Rc5pqcW0XL5\nC9I4vrcci5qw6Ha1an7T63Rgzii0g/1l41ZMFzbghN9qZjw7D9uxZVTVRS+2\nZTX1NxzUJ+lKo8sJR56tC6RCD3wiAJ06tJwaWcvZmvzRV9+jV/w7jQLb6LQ0\nM67f1iurAN3kbKiErBi8yJDPoC2UMPtnSx05dWMxc6HSAmfSWMPi3YMUxzGW\nqGCSCuE/x8zWmY7nn8A9FJhL9xHgGxH/3gk0TsibFHJF5MecJD1vexbHa0Ll\nBcKazPIyRBmRlX9iRecEOx0Ang0o/TAXCSN3CbRM16vHNjQv5fju6wwkAg4R\nUJ5iiwyausHA7o9q1w1dpHAmxZDSItBOyNiDZqzkGgqFtIrhqp9yMmmOKih6\n14RzrbV4M3/W5qz8TGgwcY9SzaUjjkG5G8udm1XPIpTEbhvQJqV+N3xUrtUn\naqDPNZtriusnTR4z6AObWTr66pYN2ysF5zI8DQYwxgyUoIHZZE0JsZ4r9wL4\nDWj7\r\n=3pia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCu9zNuPr2281ZwqwDPo3M8if4ZxfzENFnJHERzQMjsaAIhAIRZvK6baKoOaPykpNySZa/Xgb6C0IMQDt0x+wt2tBPx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.e539904c.0_1617904923017_0.8580006060193528"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-button","version":"0.21.0-canary.a93ae333.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.a93ae333.0","@material/mwc-ripple":"0.21.0-canary.a93ae333.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-vwfGrWB9xoeaHCVCD7sUUynwWzY9WxdKTrR1f0FlHD5OJc0TFj8KX1+75pG7ONhYy6zHlezNFyuFhbTikqrREw==","shasum":"5bff85d045a783b51901a81796e72c029f26df7c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.a93ae333.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLT1CRA9TVsSAnZWagAAfogP/3fPeoZ0dFXpMJmJk80y\nAJVouQP5Ej9mDZzvQcCn2IijDtHVfzCNNYwoC9mw/y9LjwRaZCNObE99HVo0\n0yPjW2DcGtBfBa+am3QAJCpQxoY1u7zMz+bYJOtrbHPGoqRuVqmbAB12m2/t\nKJH9UkBYHNZkzwg4o6qk1XqZQeQgN93prEMvqoGvStzjgYuMibXVkmjZz4WY\nLmbhmfIznPQV8wpZ3V+X36ajc7N2jq94B9miPMtxCxEVFS8TCstqxiNqXD2c\naw2xoxBjE0t8R4AbxQy98b92aPogmRVoCZLzzH/yOBgsX/KZPwJNp7Npl/mI\ndCI824dVRy8rIg+C44Oo/9h5G4grZbKu9Vpra47SZovtWUhvqSCPwG5AcpFl\nxoM12VEruoJFxXWeJjDZBWToBJfsXy4kuBCepslg5P098IrtEWJ+D/Bw0Hca\nOwuKmqMkw/ljE/AMgFtMbIK7Jc73pd9R4EGA4GER7OP3pGpq4mQw4Z/7XFKp\n5rbjN8BXfcbxKXlgiaqVydZd1yh3v1PwdxkXJJUAQxDQUA3plpywU/9BY/aq\ndLHPcgqKU9K+9pJpTHg6ZWpIWXxqMgBD2YU8Qhef6sq5qaGhVK/sROV/Blik\nS2eYp+jXPD10c45OrUZOYrTNsSRHxCk6+QsUknm8eOZ8pHGXdzkfNKehixfj\nmHjD\r\n=Uz7W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDr966N7HhffasEAszUz5K8VxO5wuELMH7F2nGxxvXt3QIhAPSOmtP5nLczis6355q5an3zoaxy3RcpKCnPHERBvnkm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.a93ae333.0_1617999090689_0.8641818165495894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-button","version":"0.21.0-canary.e142c144.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.e142c144.0","@material/mwc-ripple":"0.21.0-canary.e142c144.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XbCfPMuQzh3BEA822YPBxhGUiItPyhudWXBbm6IyZY8UOYfAJH/qTBPN2L4NpYyUA2W+JHR3cSWda9+KP77AVQ==","shasum":"45c315ebd67dbdd91f0fe03491f1f5141ab62c1d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.e142c144.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF49CRA9TVsSAnZWagAAjV0QAJnG4z6lHUfhtxC3zLir\npu0vwfblrThw4z4dOASnYHhtYds4P/cJ321z13+qMyDjmlWhSgx2UJCo0goY\n96H5nKlRawTjILAIcydoi/dNpCIipsHWxnX8pJ98PpDXuVWTkat94bt1bcgN\nSS1bOlstIezo0rfyXCqLnoTwAfCcV+nEezg3GxCR9zGknpmZIxrA/vXs74Ug\nV0rhGJlVUwxLp6DkL5/RAbtXtZ5fhbE98EcSAgvmYUzHlNgpHSeegKtMZa21\n6hE7QiH2gUnx9jKkQYWKgy9gNb9wEJYWiMoKB33Hns1TJMmIhGulI9qT+XoK\n2QMCDZCF54NugvPxeqrMoBMZUh+Vy47KNzfzSmfzLGy88gmlKg6EYN6+dogZ\nfovPuC8D01PrA1wVFgAp1FyEOMUK78GBX+spsAKPWV0d/bXm89KSstu/KB4Y\njBthEzsTjbVyaoa9sYqDUi43oVtOOhWo+9hc7monmaMOlgfDYia0xK+0jC4n\nVjNW+B1hAr9f2QiixHc9HOHpUL2Q9mmle+IkiB1tyTpSqCJKQMkMm+Pygdpq\naUWNpV0ZLHyu4eXqghI8oDSeXEG0hyD7tPYoUZVdsDmW/mOIZtZ8ndEh1cGf\nhvQenEiL8XwlH4BZu10Q2TqhWI3jR1j/ZnQ87s81HC1RvQWtIBf3QEB66jFJ\nicwK\r\n=lzuo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXP41pSe3Of4cIFx3SCYHUhDdfiXMxkXC+Gn9Mi7BI0gIhALLkRi0pX8WUnN9mlyo8ks3dIf7w2H1qziFstHzvheHZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.e142c144.0_1618239037280_0.15611200390643742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-button","version":"0.21.0-canary.382d7eb0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.382d7eb0.0","@material/mwc-ripple":"0.21.0-canary.382d7eb0.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.b2fa996a1.0","@material/elevation":"=11.0.0-canary.b2fa996a1.0","@material/ripple":"=11.0.0-canary.b2fa996a1.0","@material/shape":"=11.0.0-canary.b2fa996a1.0","@material/theme":"=11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Q/oFhbSzZaxoJY6U33Z1mkpSNQWr4WXaeEElyET9gbvJmpAb0IAFZX6dC5jtRsZFTEIvH5bifDfv8rS0SmFtIA==","shasum":"4362dff73eac3b06de6979142c3a1d5fe8ac4bff","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.382d7eb0.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQqCRA9TVsSAnZWagAARcEP/2W0PMIdA1AL9r1Osw2G\n9IQZstd3kVT+UeSo9HFNilPmVq+bMfdLjtFYmcMLFeDSOXCo1kni56qDesU4\nyEGuVfQIp37OVDg+e6Fpt+6GLzcBxPs/dAveB4v7LU4H7P38zjz2xLl8PvH4\nTMpSDWKQzEIrwKz/ec5/Uc54/uYjQvNZbFInz30BSNPDPIsNoxqsUwViuxx+\n+KgU4rZCiUdGGUTCKPcKk74sERGJIGXkafGgAIAAu0I2UOYIVvo1V+U0f5FE\nRC2iyA4OebUefxUd59EnX0HIv1ubPuRvGcJE0jIskqq1fd87FlwWtMPc24U0\nvApPK75P/A/EFW4pNFyGr2J9f3mfes5BrF6aEmjhryvWx3b1vkifrp/h1rGJ\nU/kRoIqhbMuFOLkOmUb6O/K8nBz97JTl829QezN+1j3b/stY9aBkC7FAefhX\n+9+h9NKmviMGQbSGNA+QNOExT0AkAtRuHwuBl28SbEtYemHho2Y7wlinyj6R\nADciln46QEIDSZMyishMNp4H436u4hyTslNE/O0eGE6UtH9DHNgfV+Vyqg08\n/t1sCH+4RIONlTHH5jb81C+Y6k1+OezXUD6uJlgf8PP7AMVmYqHW+QEsExCV\ngDwrWjlSyisJZUibkfj+972rbtxgcg0M2ucepfbRCE5/4aoCXJ5A5LUj1VCJ\nJPL0\r\n=/Bir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQJJlHxHgoa/xYEzvQktQovtdYzDu0WoQONdKHwA6BqAiEArGXUv5mu7vc/8dEm/N3elwaJB0O7QQynGlywNszOpcw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.382d7eb0.0_1618265130410_0.7099939194292284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-button","version":"0.21.0-canary.b16c7885.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.b16c7885.0","@material/mwc-ripple":"0.21.0-canary.b16c7885.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uVgBGQUH1axJTcwUH6eHB+9bj+fB7nKWPWt6PoqE869923TGrY4nMyOi61Atdw8h3W9QafU1nr+ggeaDmRwkyA==","shasum":"87d0ea717990122c54df4adcb3ddfe39a07fe62f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.b16c7885.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwQCRA9TVsSAnZWagAAzGoQAJ5S1Bn98sO5mboqAaFz\nI1z0PY2Q6t0CL7HxmdLSZN3IP1+5btueuMfLtO4QkwcHM7FtlcVMINm8AAj/\nWmDm4cxFKhHDoHkbbeHI84/LFPo82MPnrI27rtGNzTakvp2CJZTMItZ4al/S\nX/X1gG6NFsrI44JgtnOMhMpv8YWWyUM8QezReZCr3sKZnKMALxhXO2wUU/0W\neEvhgs1Q9kAsyvVM5J/Y67m75vgeQMurEMo6OR3r9N8lmaqYmDExqj1cgTeB\nsk/InFVZ5NV9mGsGKEE27RlzVUj+zqdcnXWCzkucVcUp4qGh3w/5mGEDUX2x\nzZw2avY3Auog7DncrClr4yF2iIjO1Qhju4Xj3cj/HU2Rrg9+S5sg3zsGO/0+\n23Nc8OneQigJn/Fl6SZDXVqlFtGKmHQ5cMJrXvv5GgQ/UUhAEfZEVmgz7IaC\nhX2AvEB8ZdRVU7pwEFcOWZ7st9JS+WqQXJ2tLNuKtHJbpkZMMqTOxPiY3AzT\n7O8MrY4Cvwt7clcTFpdg6RKadQh/E7eePNoX7nIcSIWbqPLcFbMJyKuknNSb\nA3zxGmNJRmJTJwdW4tMIjaFOovlFpEldoMiR5bwRLKRDHJjc4ARSFuN7d9c+\nUxCukdX15h31oj/PHXa4f1A3TiWIZV8JVpnEHXprKSkzACNtgcL4jfi9oBCa\nF1AK\r\n=qcOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9aJJNjWx3YsKSyGx7qrlR4GUB09POOXbppZat89JFggIgQxz94ditI15/NUZf6wczIcfuw2ZPw7kMcEqzAPJ+fho="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.b16c7885.0_1618267152180_0.9436036414802333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0e92782b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0e92782b.0","@material/mwc-ripple":"0.21.0-canary.0e92782b.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZD/aH2lxNh6Nqqdc+Ek57hCJSj2RrTxEYngwEuDgLfPb+wKVah4P2kXHCOVxrTRBg8gZWPjDdz3on5nPRL5HOA==","shasum":"fe88532bd53c756e92aaa582396b230c0c21defa","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0e92782b.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda2xCRA9TVsSAnZWagAAt3MP/1NFMR+UtPh0XDDGFL4W\nCg88n0211kqDV/jowgSetr4WyPjdgJgeYWpIBt+bExSfI8IdpUNQ/e3GHncE\nPfdO3a0qhewylSwgzwF3dfKHH4obPcE6KIklFFeJ3y7Id0/aEK6EW3qtsCUd\nlbO+LFqvy0xsaZd566oz0r7iBAKjJONW1BffAg++IvRB6Dg6koSiXgjpz+kr\nv9nlr25SyPPmLu1Y5kuw2H1MDmPLfehe6tZT87NKuwf+sMhrmhY8q67KPeqc\nJXfERpVdA/K0HuoqfgjGOMTS5fVfVSj2T6zOmgq0bKtrcd9JylWDcvpfPDwc\nj7GXiLrkxgyWHrqSVkfmkY6wvEV06QX6ruKCDYqj6h/A+Nm8TZaZ0kbqB7rf\nCgaESbS4bOapLN8AW23iCfkcPfezrxl02DpjWb6T9F3+fB+5zzfk/KgtdSHF\ng3j+tWNu9Ae4dOxxQ9NGNnH8hW+kEsPEqYfVLLBs5VE6oipsEFDAdfxiEk5s\ndw01f8D0dkxm6kLBpWSeApFmVcRPTRCBiuWSs8r9R2OjOOi9k2ncLlqwu8jB\ntPy6XtZOxAqUIebyC4e0Q7pX1fXZ7lErwwJdhVquvmRruf9dtxTJooefa0N1\n0DTtbrO8HL3BZ1tGcbS58duYWUr2PG9wegEOoHYESjGE9b38uu4Y9l28YsfY\n/Nv+\r\n=dFRh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdjaftMzpiTiqa4R7R584Gbx13K643o+l7wNpgVwCIEAiAIx439jwpvbR/lJ/pJf9YSIi5oQTzmkI6hueQ6W8froA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0e92782b.0_1618324912556_0.22430408551520165"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-button","version":"0.21.0-canary.70b3a072.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.70b3a072.0","@material/mwc-ripple":"0.21.0-canary.70b3a072.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.352b295c1.0","@material/elevation":"=11.0.0-canary.352b295c1.0","@material/ripple":"=11.0.0-canary.352b295c1.0","@material/shape":"=11.0.0-canary.352b295c1.0","@material/theme":"=11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-CAXY146UawvXZe0+uVFuWl6zXiMbLNC9Kxn1PFajGYH8amFLViLIvXUXWedx8jmt1RIHIaDezW1vCu119XE2yQ==","shasum":"9d17158941e063475012e5453877965991aef592","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.70b3a072.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wLCRA9TVsSAnZWagAANtQQAJaV/T8UVlQICTJkSrjc\nN71TKrMn152MrMpiIkINCaxXMZfb03bRJrpxj5JjUTGBBgfnayEjC9FqMp0h\nPX48o7olG1BR8qEHsTUBwV4l/3soMaxTNCHtC+4x/XmOFlm5MtqOyaI0t1gX\nHqnZ8LBUJPkBOODlY15vaXUe3Uy+cpXvATWTBnVsZ/5orHCm8HospuSdIYGN\n7g99LjWeZVqp7UI2jNP9vsBrsLuhvWv8WPGv/JOKdJDIisf5gHRRIXBlACd8\nAq382WpDlQbKs5TjmKYFVSJ1gnkTcDXAVnpQ9w80EeiaKBQLjogT6r/8GOPB\nfmJRDko/CL2soOIHllfC0jwq5tGU3AYHEct7ebpBFlLHYq4TBA0htRTJ3CgK\nZ2Fj3T7Rp8FHMVfBGMtYXtqxCrInKuZGsX19G2QlyecC/O782Aoo6fEpKANS\nqhX9iGnCXptyYvpFzpF1KZ0fXe7LiHIIZiC4bC59Mbzf8BCZhyP3ha1Bp5I+\nDgjK9/mahRAK9QoNKqzFEwvhWnC2ZdD7FvPqO+rBpDUCi2ZKatdfenpFethR\nX/0nsRo1k+Fm1JEQb4TsPVY4aOGVXr0FHK/O+egg+a97NIGphqTgACDtZyhR\ns1c613yQPLWJUERtTCnDhs6YB8h/idyVmXtNwzFyoTdWlEy5OatSC8vhY/tv\nboGs\r\n=uE45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEgR8QJVcfw5XbIKx1BAhLatiukeNsmqQh0bD0wIntRwIgEiO+l2amJnoZUaRqdbcUA00d16qTAupXVkeEy2ZGTsU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.70b3a072.0_1618439178787_0.27045383622990604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-button","version":"0.21.0-canary.ff79b092.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.ff79b092.0","@material/mwc-ripple":"0.21.0-canary.ff79b092.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.3793a3143.0","@material/elevation":"=11.0.0-canary.3793a3143.0","@material/ripple":"=11.0.0-canary.3793a3143.0","@material/shape":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-z79fm0ON9h0HxxPeY1fiVG/GU6c1Bm0xqjEwKN9rIrY0FVuvVBP0wsZwKi3tfBoQxPI/biVrVY7xjnFMmXZKtg==","shasum":"28a27c1f201ff803494f30f3229f3945abcae3d5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.ff79b092.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI0qCRA9TVsSAnZWagAAdMcP/iPE2tbGNhoZohyXElIw\n9JnawOFTZwDn1qLn4OEXL6V2htdbJvD2c6YbwTG5+xXsPTjyvvgGZKM5pjyO\nTAO2U9ndJKSTmiBtdvWtorkJsJYdiPWDAYN+1OMnp/76lhICVhbCT33RST9Q\nChX6n+9XFlPBmeN+P3CftvdKfOIDdKzhmKDS4zkZo0Ci3FtCcISO/nVUcqxQ\nMsFBwsmQFm0RSVTYzQX3LMUczavlLQSFbSi1smu/+7R6BzMV11GvJrGH/h+0\nLmVjbdO4ZR+wOvMgnHNdMZA4nGqhMwxf8nX2l08dj+zLQRjGzCkEprbaXtXS\nbcixLyRBrEB7v81fGI2wT6kWUxcR9ojdAzWWvlQtKXkUjtKMzI/pi4iu5N92\n84Y3vPDU2yKDHwj0Hnvow8yTSl7XKsByj44ZSM+IqXUFaASvfRh4q1whJS36\n+hLiosE9NVeArlSSeiVs3mTy8DPG4eIniYltVImMVUMFfkyGC4+aB6hnvVTy\nDRZsQwWuH3f9wYdoDtcvckZKsEQF48mTnKZRAZrs/I+h/Xn3pNWjhhFcOI5T\nAhDtxQvX5g9kqgSMUQ3Jkw9KcXjNwzp4cQpD2o+z6q2yUoDh6UR07qUPazni\nH25VvyHdYw/5ttmb2X6+Ef7Y9S/y7oD4NUk9xe3YbEd2fSwu6DEIfiEkE2q5\nf2bw\r\n=irRf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBeU8n9hoMWVlmRubX3w+7m0rP3P+4HSff6YBtglOkPgAiEAv5AkGK7S6JTsB+GCSKvPcXZLJI8zi9oMLbTh+DOICUc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.ff79b092.0_1618513193718_0.05760216579890276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-button","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.f35b2fd7.0","@material/mwc-ripple":"0.21.0-canary.f35b2fd7.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=11.0.0-canary.3793a3143.0","@material/elevation":"=11.0.0-canary.3793a3143.0","@material/ripple":"=11.0.0-canary.3793a3143.0","@material/shape":"=11.0.0-canary.3793a3143.0","@material/theme":"=11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eIf2gZ/sNY/Fl5zlcs3MzctU8gYmi6NiQO8rKLrlxnVE5G5qu1ZgOtOtghpbr1Oo7zt5dFGgx2JL911bN4od+g==","shasum":"82c681b27d9ef9121a32c3df455fce72863bc5af","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.f35b2fd7.0.tgz","fileCount":20,"unpackedSize":84799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+fCRA9TVsSAnZWagAAnaoP/0ZA4GDCWHFMNEcU8iXC\nj4M8jfvSJ04OlEOMJICBI0h156/KX+1cyGK9JORHvphkyOpq4JL+emciEfLu\nK9SeaTD0ongXBSdRY9R8fLPHclOtgYH/YHvtv6t3ZiJM00pWA9rtRqcMvjhC\nyaD1GgpbpZqfhSPOC5qwltdWZQlgW7X4kK2hlDRlE/KQtG+3Hp1JmepjULHS\nYFVhyrRlaDEWjZ/f9MdC2VHxSZ6PH6naG/V4nejqdKOEiTLzJDEJMfzziGdT\nVXciN5fg+SAw5ZL45CrC3rzG9YH3wvksglh2oRuyzFy6fXurhDayETn1o54g\n64LjdtTG2JgVoEzKaoZ5aAYpuPIGS68+xwhk2mmApnQuMURWEVhWaB+yCypG\nOcNRu9PjXVEHrQgCAWOY6YkX3DALifCQ9gbsK6lTZzSu79OVq2dRYCu5qT/s\n/+DAa60FZUGIC6F67jWZXRcp5GKRd4ItFI0kqzxZo8Ob2oUYqEXQUqYhqmB8\nwQyyaPNSUPX33Q4EHpidClc9kdyiXs2qSh9QdHQ0ZBl3uV8ih9ShBkJrUSSe\nGw9pe0GhAvZHY4ApK2xKOtwDY73nHzJJ+rdLBeI6Zx9KDHOnxWNEnP3vmMP8\nSgEIy6lLCibc91OB7rWVbM4Ghx9/NZM35u1UcO9yKTCEfrBTG9fyRcatZAqy\nR4n4\r\n=XO4C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhfl7Gt+/FRcwZHjBgoynl1aZachPSvAeeWWWXlGcmxAiEA6gwSkSJ9rG3ph+WmLG1xxf04X4ZGlZJVlaSPQDzKNmU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.f35b2fd7.0_1618513822564_0.86087780802961"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-button","version":"0.21.0-canary.11977cac.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.11977cac.0","@material/mwc-ripple":"0.21.0-canary.11977cac.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.3f342c3f4.0","@material/elevation":"=12.0.0-canary.3f342c3f4.0","@material/ripple":"=12.0.0-canary.3f342c3f4.0","@material/shape":"=12.0.0-canary.3f342c3f4.0","@material/theme":"=12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rl4U7upU7+hos6zW6EqBqMRErOljTiivIpo8BN7CK6Y4TLhwbBuHC73L5UIoIP6dJUFjaE2Qvn8zWpZ3d372xw==","shasum":"b5609a257d87a377a3bc52fa6a7f11e56f4b17c1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.11977cac.0.tgz","fileCount":20,"unpackedSize":84847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEbCRA9TVsSAnZWagAA9dwP/10zg9jApSa7yrQasrLV\nwuzycWR67Z5MEEZAR+jrAOkA/+GsZvZyChAdu/e1cleCgUFqrHPUS8/DbwDN\n4CfdFjp0R6xF4m4eIymI4ZKoXo4p/2zmilcGMfb/gN1RDlGVRQeTlx4N8Tdg\n0TWiqqNQ40mgTf8XaygxbBXD1dhzMw6aD2Hvsv9ZpD/9rZg7ATZ3K1coE2ne\nCCaWJKxjVFsjT+QZS26/+kuOsXoTXT7CcQtm5fBdotltZOqh1XKJHaGambqJ\nI9cG0dE5PGM2dGAld/LPnHr7Zm9fzuz1hw9by63iQViS+ImKaZiSnTKMNScA\n+VW4PMbNhqtFi/C9bEu2tvOp/tmWqGnyUyzzVy+cxjVIpVCY/7sRduDss3kV\nmPH9fZTti2HbT19x/3itM1UE09VssNcrmqRjXmmrxURDz8fJLybWwOnSmu9u\nyqtm7FyYr3xtlhi+nnZt1NFNiLeS5xVseazFuRmIEDtc4uTy8oHf8be0QQzW\nz7aKmJfrzaG1+Ec8XffCnEc2ymEOnYmsWdGvH+ynUlbQJ1WrEO7303drrJIS\njfC1KdjMNJtZYohTydqkr2/pKHXUQtkWyHzocWlh4H80UzXUPlDDdjU5Cym9\nHuyAmoOWLUTRRiQC9c5ahPcyLj0XGSn9iQu1JbpTX8Qyd8DTgoCeO1FtlWXJ\nY8ho\r\n=5LRo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALOI+PS+NlrLMlu6lCOn8PH7Lsk3lrX446mXUtZFqwmAiBJsKrGlYKDBQqF7qpVQaIv+GUJjnU7R+zGRRv92nZJng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.11977cac.0_1618534682774_0.33065906534607836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-button","version":"0.21.0-canary.018ff45e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.018ff45e.0","@material/mwc-ripple":"0.21.0-canary.018ff45e.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.cad489689.0","@material/elevation":"=12.0.0-canary.cad489689.0","@material/ripple":"=12.0.0-canary.cad489689.0","@material/shape":"=12.0.0-canary.cad489689.0","@material/theme":"=12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D7pvfCBHWRFwVuPkgy2ojXSLhFozaEBXT+Tm66ToBGUp9G3Zt71Bk7Hv0c83A8sgaXlwh588PYSVUnzA0kNSew==","shasum":"53ff90be7df09eca1abcd2e26c9ff52743b212f4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.018ff45e.0.tgz","fileCount":20,"unpackedSize":84847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3UCRA9TVsSAnZWagAAy0IP/Ry/RQfMqhCDUNuPFqsG\n3K4RhvGvQiKsZAYAiNirX7Ti0MVWq+yOc8Sn8BZfFbkl893MhBsc//0GtHYT\nz1KUgPy6i+Qox3p5brYz2dNnxYN2Es3EdLBxvfD12ouf3mQmU5TzyDNdgWl0\nnS1S3K+dVjUGne7/CV+D5XNMKN33di6KJgHNGleGbnPAAD0PDUIt8TqoP2S4\n3TonQvy+/3DxktQq/fyV3RQRwBGVuszDLm3cHebW+a2rNNO8nROBEpFK44tf\nbaSfqP0Hahtdvv889qcs9U3Fn2H1oqrgzJwm4YTQP8ZKTIaoAZxkL9QTHoKb\nTrpF1nFGNElzoDdjRkaHXayu9QvSEjnCK0fzXRsJ5QOltBdaGQgIIetq+ShA\nzFoStUYT0fhBrFyJ/cT4yHXxXpNzDGR0EFNm1oVNXuXA33eBxAj/16TBic6m\niOQ8C1UZIDHIQSXDXKgIbF7bd4icxbc/iSLj+5J6oacZesCiHU32zewhCUuZ\nkKSqbeCEKHRXDnJSe+xLyK/b8ExwHALsvvb9MfnxFderQW0CWAQQWH8P5MX3\nR44uiL6Iv33gfcgxu5WZfjS2qALzwUtJ1d1uAnX9vetM22yCoaxH+uWGjvBa\nwfDpt/nLENE+4A6hgIOsLc5t3vw8UCEwLtSZftsPhNIlc/20vILacbebI6rR\nwUyv\r\n=aYRN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHSTZtxySm61u8vX99VLqE9qEr8cwg7Si2PjzbD6IHhaAiAHDPBglznkcEN3iwV5BBLWF92oXohmN5mMUFCClbjitQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.018ff45e.0_1619131860335_0.9615308686359005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-button","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.c99d1fa5.0","@material/mwc-ripple":"0.21.0-canary.c99d1fa5.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8FR5a12s+R+KuXxIdRZIJuHKdrxJ01nYqvVBEsp25DMSTo0h7dK56iQ2bjL+V8xvpQwCXjI4nAHPmoOGlG/wYA==","shasum":"4f43459f89c94f5c8d980f361a5c29a7a0ad6b67","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.c99d1fa5.0.tgz","fileCount":20,"unpackedSize":85125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxibCRA9TVsSAnZWagAAZssQAKIKUW3CC/6S3NPox3Za\n8IuFqwnuwAhL0r13DbuZQS79F1Xh3/Kg6M4Sk9S6UD78uxn7rjyYH3hkEFg9\nq6ClD348PFnnod+3gjeIavLt5IgKuRi0xzMEh2K9/9TXAfxPKaWpIlXQAhXy\nUxD3xp1JyBUqGASD0ZuIX1MI4498bcfixhG5f+QvzAnOFeNEBrWtLYUkV3KE\nWcYsQEo8FE9SFKYAUs0DxOdWelPiTs7pt5BxUSGPTH3wP+5twobslgBuwD1c\nzEMxi5fQQVa4F+0ohP3t/yREfupTiOz0lULmUL8srWClR9BJgOD8EWLv405t\nnqtHB87MyXS8tXj82A/CfFOfSKruypFK/8xLQ0giySYZgfo7GGIs0oA5RSgL\nwuNGwqsY3SJUhHntuhn0nRVp08mP0oSzA4HOTXCiFuFXtmAEzKjdy+PzO1XE\nlbV7pYO7zMtimlejyCHC6fHDbyTA1USSi8z5gRAoTB1w9Qqs2HelBFS0IZRK\nvjx2GMp81DY1qzcx2ZamRCUPad+wRiNn9cMkF9BmVPtv98tAT58YmIbPlOqr\npy4f4zJuvGLZErXB4BccjQYB1Htdk1zFw7d3F15Sn4FAJOSucHTTpAjTBGfW\n3RMcuGAU1gcx+dVOP0U7zmOWH1JoG+0UwOE5Gs8468QuNBR6hunH2LUWr37q\nfEj0\r\n=9M8o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7UdQDBVtl4N3b6PWfOKWPdA1xITqTe2IKBjsnO1wAxAIgV6PDt5BY/nalr+Csim0yPtS3+lyNof1WEsqlzuzczQ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.c99d1fa5.0_1619466395325_0.4862947563907982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-button","version":"0.21.0-canary.eea9b304.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.eea9b304.0","@material/mwc-ripple":"0.21.0-canary.eea9b304.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0sE2m7cNiJWoas+56dwuKg3PJRSNShXSLhAYtxSJTxmATRfu23Cyq5+E0M5PvAgWViRk6vk/52kfYmo2eFfbNg==","shasum":"f4c5c6588339166e931a0ae871b1834dcb68b205","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.eea9b304.0.tgz","fileCount":20,"unpackedSize":85208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXVCRA9TVsSAnZWagAAZLcP/AvCmsirRcgzjUHZy3vt\n/Tu/WNn6wiWoLceg3JtIox5Nd8JeWhn97nKjUsq4ij3l3Hu6U7iGptc2/QPf\nVAqzIYzB/lQdaPKtgW4cgD+5it2X0AhpAW/0yqh22HV5JzKO63nEZ1hZm9oZ\nlJfSr96mfDrIAw+KFjMKqJG3k5jRqS4N+KzLDV0ofOTtF3n/hef7G0oOMMkE\nx+MGZlg8EUFYt9JwlqdEuhY1eMkJziZpo3Z6SBDYZ74RLIVd0rVCY8iZ5xxj\nZllUKzxQ1KcnpwX3F85k6KPdvP31I30+6moCW3FqkYODuwr9a9d5L6biK4h1\nl0wXVZkG2C6h4GtwUYT9c6Su4nvSbBM157lCibLcfmzaHKGE0ZKVz2HGFnNA\n12HKXo92OjUhC+pNm5Ww7i11V/PNvUctAvWzfkV9A7AxPw+r6g7YSRYBpoQr\n1DgTDNj3xBMOcjBQVrxMtC+dRW/kD9pAdwIGiskiLOeZEeo3mglRoWwBiV2g\nC6nO1g88SCAy2SVI6v6kreEQKLozll5kud9IvPaq18+GayohonIwGGj4fjH/\nU1AhkkD7UeHQ/gUQTnyx5Ggwg3LrY3C9h9T/U9EWN0+hf362C4kUeMOjMz/B\nD5nsAtLFchQlpTPAhffsbdbhnEZsxaDIG1tmYhPlagTBlcjbXipGrVP9YWQk\nXQIy\r\n=AQVG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHGiLH6AX9m5L0IonC6zha30iOamKOYHWvOESHPOfie8AiAYCnemkAXOu6aCPhoWmHbUsvESzpnnusi670WYtP3xJg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.eea9b304.0_1619563989153_0.8802706261308322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-button","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.5dd85d0c.0","@material/mwc-ripple":"0.21.0-canary.5dd85d0c.0","lit-element":"^2.3.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KH+/yq4Pi6kV3DVDMhyGd9+/6QYBSBTM9p0Uyp3BCtPklemU46msjvd0rCvMp9o31e5kt5mR8Ur29ER5+aeC8A==","shasum":"85cada67d8c013007083e4701adfab271419d3cc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.5dd85d0c.0.tgz","fileCount":20,"unpackedSize":85208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKe5CRA9TVsSAnZWagAAFswP/0vZ2DJR5obD36T7xhTx\nUQzR7Q24enLmi56N06H1sJ9nV+/G1o41ztAzSFBlHdQMN1NcTj4k0OWgv2IV\nFdPzLHvobaIfTC66qnEopJAnXzUNZxP2nAeWCO4eFGtcDXHQntNjZBM94MrG\nL88Gvi5uJ+fGWpfcYCR09hPrvu4hLHy6RFlNFmo5KTpLyv5IOnHfdmvg0wyZ\nQOBbbIME5ALFQ2nnbVG3+Cvy3LGSZm+gMB9tYCkw5+X03Q+e/ZWuzK7VqiSo\nSEk88NWRIPd++h8iHFk0a6GHjUnTNueU3p/3ZudhcZoYual1iN1gRULH4Qrn\nFuDbWUI5ltOIZ3pHhkK+3QjD5NDgjnoAhV0tCeOMu/+9hwMOGrfmHK9vFemc\nwnLqUXbc6wAnViqS+LjoEtSJFbViwVGRVZC1kbRD3/znxAMvrSBfp/Vzky1z\n3Y701EfMnY3ULkLPvrMbvA6gAp1/KG5BvkdPHB/CEj+ofRvpE3PFQDp7EuhP\n9oc8yqi+5TnbJ+ur+RMIq/dgOYI4ZZEr1BxGC705r4yeOrxFu8rxLzQhlRZ2\n7vq6Rff4mjK16W9fdKZ4q5Aic9s31WSuW7GJIkmT1JXA5c7RLJtHzlKv0TTG\nr5OBzbmjF7YdSpi7BVCzS3BQCiJ5ebDAa7nhITFS2wKFYK7eqkPdXgqUxRUi\nHNH5\r\n=50B0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdHTBvgCNKCFlf4DJBp/PkZJOZyaLHYtVRO9fbEkEZeAiAP00nxlA5LJ+4Ttkjy8uEwu9RxC+gLJpofrIhE78HKGQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.5dd85d0c.0_1619568569561_0.4226989890346675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-button","version":"0.21.0-canary.cc813cff.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.cc813cff.0","@material/mwc-ripple":"0.21.0-canary.cc813cff.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-80QU6BpiSbR0L41yHQIFsAEkGuLCMHvk1/n26WE8GBLFOXiGDhAi+094RuIAl1pfuMaQ03oJfgp7w4YoZlldzA==","shasum":"e076f93def8b2d761a254748935e7bfb94058bb2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.cc813cff.0.tgz","fileCount":20,"unpackedSize":85208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRXCRA9TVsSAnZWagAAJ8gP/iZRSJsizpMc601MYsOP\nGIV8QfQ7cyD3PUv2Mp7AFnPuLJU0aXhJM4SqPP4Ou2Qp9ioNMqPAhJVD014t\nd+790jyd2SqumeeqyeoiQY11ehX0DElt1vZcE798rxf313WnRZlIpMHL8R2p\n9aetxc8Fl0DxEOOHAlcc3DMA+f78aYtpz4SMAcFiAldCZU29BexNrVWMVTof\nkLem+A6imERYZByxs4/JgdjWwtr5pJLgM2ddIFrjqRORDDYjT4yh41kaRmBs\n5TqzXWv5AdfDt69yxCxHeHDEj8W6rjwjATayaowfQCvshPiz35tg0Arfeg2w\n+PSmNkdQ2vE7rTArAJoHSTZdFYl3WFOUnmIybxcOCf4H06g4ANAKFREfOUaG\nd281zLXCm+I2AWWhTkvn5nquhFvFUWsPzTIL0UsWSZnH+ykcWPxwm4/J20F9\nQ8Aqe8nDwjgf5C9jNtlooU5C+gwNnUdTn3FPuoAJNa0LM3WPTD7g8fEUh6Pr\nkFzBY1mg2czfczFLIElc+/vJ9ziiK+zys1Zep3egZciB/d5AnhFPB6VFVs/5\nCADjtcWY9ar3R0q351ODG57lpnIPkhWNx6jeGJNM+J4F2F+HZZeFnaaH19Ic\n+wys85pbIgdWe4Y6MFnKSZdR+D9OxYojiz22GrBG9vgTDEBRSBU41dZLqWsa\nq4/n\r\n=6VOr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqAl8Wc6/YEwV1KLBWNJFHYmMUWrHvXGdVWO9GX2+08AiEA0YZ2kpcnvXZIpfSnGx4QCbFr9FmRFk4jleyeKba6iYs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.cc813cff.0_1619817558832_0.31659418724306665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-button","version":"0.21.0-canary.0875e898.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.21.0-canary.0875e898.0","@material/mwc-ripple":"0.21.0-canary.0875e898.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a2tQWlkDhOUiQjitL0sefO/MJKl918GVO1wEOO8nnIxkLuH7iTppXjs/8VdqbG8+RpYmClHhwZd8jvGqF6Fq5A==","shasum":"7989bea7c4b0ac9cb65479cb36b58dba0758eef9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0-canary.0875e898.0.tgz","fileCount":20,"unpackedSize":85208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZACRA9TVsSAnZWagAAjnsP/1qaRV6NeH9d/NBU5vP+\n3xQK+PoXRo7zaI9xtbNN2iuPzjpukZw+LIiw6YCVcrrdlQQSNsuTq9P95yeu\nnObBRSGVGdInjZWMZcHAqTuHVO1VxImywXzPc5u2GyorHRPI39WOq4xz3iLF\n7QGGcU6l4W6xY7g23B2B4rlzrPsozOGINNXq12aBmHJfM7Dgjg1DNJRFJU56\nQdzIl6aNAdQzgttM+aEK/Y5PwOSD3066+0mMPIwlyEp4S1THAMVWRqOMOGnj\niQ1X/Th03yG9F8FaMxJbzhlRrrfAD8nWrTLMJNfD/Y66wv/wH6MGI5YqZHFJ\nAHrlfWfBfc1MHNZatUFWyShGqGasemAALlPHnqhNhjjQsvttOukLaC0ApFQg\n09wea08w3KwZyBRKxHJd1lG4ysKdxOfAou9J7rjKwctunbPT3q76aOeev2ft\nW5OWRwrHNRfsoMSfuwr8w0/szUC97tPI/J9YdbLfaRSUeKC4V+cFmzp++KxV\nDR57OzNu0ni8/eR7ZRtbKM3dDvR5lZsrKz4fdfPL3N7M4TiPzrlibPvlb8Q+\nkqK/6z7qObO607JKPhUcqNk50S1qn8xVcrnG67R/ePKmhOYlmaD7WV9WoqxY\n3IzSQtfYdCmeXJeq3GOCM3y+uvlaU7SKpLK2smZBRayWCpD7gq6B8g5N6EOC\nPpVR\r\n=2ZLh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTy2BFQImr/z9tHhwjQOstkYmdiRiyyq8Sxc1+bD3EPAiBxljxXzP5iR9kPGdBiqXkPSXbLEVVJh3T7YfPi/BZ6GA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0-canary.0875e898.0_1619818048116_0.3754745183610009"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-button","version":"0.21.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.21.0","@material/mwc-ripple":"^0.21.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"8f1e7e1b886b6c6820c18c8cc26cce7b15fd2c98","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-nnlBrmKd9MF1880pxoKCXer/toKiUX7dKbZYjBuGLC0uRfW5pdqWro9MPumcigcIkKDJcoNitJDHuH1KCHBl8w==","shasum":"e7bfdfcd1a55c33e3a8d41b3caad82f53c802c06","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.21.0.tgz","fileCount":20,"unpackedSize":85156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmQCRA9TVsSAnZWagAAeukP/3sQn6uvN0M4hp5hX2JP\nJXeW3zj4qMkv4+zAM84XhdebbBXZJsct7BEffcUzqglCyzl4IaRtT2DScYbq\nMsEJ2sfQBmn2QVlBZs1sBzXewHs1AW7CaLj1lt0Ns5ntuAriq9T0ZbUpoMeH\npYgHWaRYconkcve/gpCNpOs8DpsWm4O9devnNdVAckUfChXy/FjeVwi44p56\nEtVzqQnXLP7agnvB7nPuTSd+ZKxB7CeCA8wiNaVOwEgd6GoqmwdYsD4ucgWv\nVZPLWZyDx+GPtTDEDlP4g2XohfulypET4OWjAVUsjuLsa/L8z+7sjsuSKc4g\nVPnJle9wqQrZvC0A1fqGGEYn2m1wYwm9n+/dP/bY2txN9W/8q36NV13LMWUa\nrWgKCxhhtffF2TT0YA8iZkkmB6Xfq560YuN0GC2cWIQSBT4dKPfDb7xCujUv\n+evVcyZES13wZ4AbvGMG5ZADMHPmEGbd/UVA8BHxGF0X7HtbIhuYIyZgC9VH\nFbJQ0Pki1q1JU+B4QvfZi61UOhPrdv0tmR+af0BVrfaVAJ7Rb/ZuLHEzhVSJ\nboC+VSDWEyjF4+Zdexa8gspr8FQivntFycT7JFlMM1A5oFN6RmQQTT+WHv3x\ntfdePA+1JwIpcb6kGrkkeIUF6ojG95Fep+EHEDQDGYoYSnz9m7oOBEjPDPxX\n5o1I\r\n=gliF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcHAVm4RBRU9xRK0B3mVLyp78jq6eq0LnpsolPRO4fsgIhAKBpu/Y8xmexxS3JLCeZNSlrzQNWXBNJM2xCaMQXZMzN"}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.21.0_1619827088274_0.37132550217608085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-button","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.8f1e7e1b.0","@material/mwc-ripple":"0.22.0-canary.8f1e7e1b.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Za9XLfzWr/nQvdLzng52wJcF1PUisz1uW0FLJ08lluMWBb4ZEgebH/r9u+NQget0d9YiRvg1N5qOSFOf5u+o2Q==","shasum":"3f2234aff01cc799908fa0a3cd7b00ac00ae578a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":20,"unpackedSize":85208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJs8CRA9TVsSAnZWagAAOCkP/0r7d4QnXvR4EauxcJaj\n6/HEPVJC7GhWMhCJ63e7cu8Y+DOTCkmIc0Dy1s/EgcAYhQpRHlZbTATjGMuR\nt3QgfRT/r75I21pstRtLtPi1eUF+RsXwyvWAtxMrRz9G2floH6r9ktR4HDtJ\naH+6kx+gSFSz5uIu5lrRSyUOEILLTr3JeE6QsGlJTdTlTuQhXXhc45S2XA6n\nAjzRPE3u1xlMigLga4T1DC2SXgqzUxVrG0+9PycwYyeIZKR32lmDs4XxTNID\ndxf5ZqT7RM1pbvOWH6tsjHX8w3xVg5bqanLy36CHx5Nh4dW0F8g89gzGeKpj\ntd/5t2+ARA62eBcqAmvRDJnH4jJlykij/dK8Px/QoICdM86YgQdCwJ74ftJy\nqhtFkgKTh5d4LjxLfpsUx9advQPsKQhQAZEaipZrZPeEuKOgtRUz32oNZWMB\nseVZprz0cupDXxrUlTeGeTPawODXB3n+gVLyinQx3oBhuV2dBOoChipgDCsy\ny4e83uwmX2ALTfiHgx+9jRd403O49Utgm6Kt7CGFR2T0pZlt8A8Y07sGKFml\n7yBzk/peRr6hmpUhfsk428UjmshWqch9bdYmbgzvr86vR+sf7ZWsL+SR6J2R\njlGV49QS+1ZgdU2RhMU3RZAyOYOnrFg6LOj1KrQp3Kjx/7lngQwAgY71CVSG\nTKXp\r\n=Wv4I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVphvDpraSNUrO/PjmPF44kNRCGQIqtkkaH+SIRuRHVAiBzPPjMnVrEBju/+JQS6hyZdltxp5k8xsMUrSWo38ArFw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.8f1e7e1b.0_1619827516354_0.75023202308706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-button","version":"0.22.0-canary.deb0e792.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.deb0e792.0","@material/mwc-ripple":"0.22.0-canary.deb0e792.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.197f64fa2.0","@material/elevation":"=12.0.0-canary.197f64fa2.0","@material/ripple":"=12.0.0-canary.197f64fa2.0","@material/shape":"=12.0.0-canary.197f64fa2.0","@material/theme":"=12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JqroaaIsR/s5qgzYxMcgnuuR61xR2nMsC4yo1gsW3u49fS3GVj4uzS68lHnpzj8hluowELaRmxwDPr4Fl2pTvg==","shasum":"28e5ffe15fdd99e9ea292eb7ab295f34917eb883","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.deb0e792.0.tgz","fileCount":20,"unpackedSize":85208,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxTCRA9TVsSAnZWagAANgIQAJy7ZxoPes7jhWQ/V93n\nWQSJ/FaQ1eOkNn9jAvPQvTNiZ5A+KJ2y9mUGEXNctZbwXPwYRLHSH8wwJOq5\nHIkEDGzAConOtckeqjGLUu357VZMZOAdBtpLgsGLLEisgqeYRtxqhaqrtMdv\nnAH0z25I0Tg4y08PJPKfOqSV8v1yMghXuRowLI/TYYzr+IK8Va7snFGTix5T\nUgt6AB/458BVoLre4C84t/wFZxotC4n6y2InFtXgU4yqP/zGgPQaGQoS/H5g\nds56m+yXc6Qy42HK/ABda/f1o2Ryu+BR4BGLfFpFeu125eOjcNtEm9QpISaG\n2GTkc3rr/K1eM4qCZoGfkx+KASPly2OnA8S79/FK6tgHbejjGvJpv6zP1M7+\ndGCjLRLmIJE6u9wGZvNnw3Af7z1+ozDHm2AzmkYzrLbtiLWL+yy2rr/X54+l\n/dKlr67kRmHkdOHRYeDlNwiRLVkC96qjq+MD7KB5kVgPfrRTCaPbPu89e3PM\ng82OhStHqOF4ixYrm0Le2ZsYn7naLrNxWxAeOC5Un9BAc9GdI7+/U5jkEA/X\nNhm1wEyLQ+abmEmqsevtiaocw1uG3wow+j2uhHg5fZ5wXTvWoihIj15ykUiq\nWrp33OXbzgEbfJnq7h8cGHaYQ6dd/UPkJLyPdN/IvziOSNHAviH+WuElD34V\nNhlD\r\n=8r4O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDN4ewwy19i6BLryNz74Ka8q8WG9IEfMqBNZyAb+xEVBgIhAPfXPPoYMhk6Hb5U+goawpim5tLrDIaWfdBLMiNpEd3C"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.deb0e792.0_1620077651085_0.7428319689110021"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.a3ff615f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.a3ff615f.0","@material/mwc-ripple":"0.22.0-canary.a3ff615f.0","lit-element":"~2.4.0","lit-html":"^1.1.2","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.474836ad0.0","@material/elevation":"=12.0.0-canary.474836ad0.0","@material/ripple":"=12.0.0-canary.474836ad0.0","@material/shape":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cgYA9CztjpNaztOx2ADTW7sa9Ivcg6GGdEvSwm5tow4htUVSLZsYv6ibKNZ8iedm2b9JQEVm6fSgFqK6M6VGwg==","shasum":"0fcb8aa399e93eb6c3a201b30295a563bddcbe28","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.a3ff615f.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHo/CRA9TVsSAnZWagAA240P/jkcIYX9JbJGokDTXhgR\nqwkBckO1wpAHerHHlR7GG2KeWrHN3zf+vlBV7Dy2ho7N5aA9XjZH3q3qWRGE\nxIIaai2ybKcxQWmyFDPELD8IwhYuvtkc26GGqqIFDizyVjvfJtLtMfS0zRNB\nBgMvJM7dt+RNDtKSIfpsEoGyC2TSKPVLFyb7NKxW0xPS8gM+4aai0wTYsBUw\nIXcOwhV1aqli4SW/lVNI3JctzRR6rqEHUfe67WME6XggtktVE5Bp4Y8XlN+W\nNAluQlivr3tRujIa41afgBko0V40jGOgEfltZ3MhJkeqiT0e/V4u9APt08k7\nVRukrrwEOsTQQEsDbu8FreIZX0tMiIumZxCfGw90Ayy5x/qydeugN0f9Iqhq\nXVqFlPpz/TPJGtLqeg7dGhOVMLaODEu+/253R/H8CZAQUAhmxdMwO+7tv2ip\ncpicvs51+/jLuOtncUaL6I6yzBsSH3o8EMtAi5S8gIBElc7l6ktlcxCAgEBK\nXomamCAYvPatyamxWbz4MOGI8Z5nYjo+mFFpiP1o8K/T38/eRshSAq7Zr3US\nL/8cAj6wjsuYmHp0nAyIAisKxanyS/toWzuQ3RoiEXDY7cBEZw9n03gKeS+k\ngPiw+lW2nFjS8AD5LNimmGjHGf5fS+blembJOLuri+qOcQ9WA4Jd+3VCkspf\nCWLX\r\n=5cfM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFv8EYdSBduZPfPvJKx2lGviNA8zgoygZeuto+WY4SJQAiEA7xRirU1t4JT/TtbHzGGf7+x36WIhpN+4ougFP37TGJI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.a3ff615f.0_1620081215146_0.7705127897585327"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-button","version":"0.22.0-canary.948ccfb5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.948ccfb5.0","@material/mwc-ripple":"0.22.0-canary.948ccfb5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.474836ad0.0","@material/elevation":"=12.0.0-canary.474836ad0.0","@material/ripple":"=12.0.0-canary.474836ad0.0","@material/shape":"=12.0.0-canary.474836ad0.0","@material/theme":"=12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zlY6LTTG05gK/Z3rdvj4R5PGvQIZekUKleXY8/xel8mBnuYBCQ2Xx6m5H9QyMlyYDbdg1mG9NG82H3lhv2+pZw==","shasum":"dc7dd148eee267d5ee048fa833d59b5b01e9c653","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.948ccfb5.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJD/CRA9TVsSAnZWagAA9koP/RjjOURIN4uNUhgw0vc5\nqIQ1xoVvukw0xVc8KPztcouL58FqQJu7C+dx3FyJB3wO3oiOWRdSfzxaE85E\nubitTvSdG/Yv1TTsdKmg6Z+8UaGd1+8i45DIyZrqhl8T7Qn9FsYEUix/rpO8\nyphdbmXt7QTGP7GIjZuCSXXkJ153Zy9XeZe5OTqsvZYEytyfcNQzrQBHPQS4\nIYHXs+bzd9rEEWk4fcGqwn3etuPzrJyhSnAVtC7Yrzb0gMsTjtICcxdzdY1o\nJAZ7fVm2VLptq168O4Qgzk1qYUlImF/Yj1hOjcGSUul2yZDPcjDIjAq5AXLY\nGHSEtsrPEu3yYOk3HmtJ3JrjZnnqqAazqqRSCToASGNxEuJqVV5YilqQuS0x\n39LybjEI76PhjgRFNvyIxms0qFSdhNVSBaxdz/3O/c4/ncxMb5Eb8lBfMQxW\nAlu+yfucMv6wJJRxzkHfWv1GwwFCLZBlF0nDE3Xiijub4Ht9G9JP6TA/KbRx\nnWQw1Jab7ZaDp0ZyKTPc5frv9P7mS0z/cX3x10MdvVkowdS40yhJ666At5B0\nWkRN/iEYweQZq5ysPAgArWPUg0iN6RfiSE+g8YeeqIbFWn9+jDH0RS4dOJhR\n+I9lO3zVpIwsqfLGwbxi8dMTPdiXIhP+G2hjy+ISVDSEbbxfVCX2Kxe6ojfw\nff1A\r\n=7q9X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQIBAiYUdkSzgY5iVfMiZoGtZOSKG8z3N4vYZjz5KN/AiBDtm50TO3GCuSlexzglx+bD/z0NJj9O2hnBf1xOT3emg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.948ccfb5.0_1620087038857_0.39206782222963077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-button","version":"0.22.0-canary.9f8337d7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.9f8337d7.0","@material/mwc-ripple":"0.22.0-canary.9f8337d7.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.be999eb08.0","@material/elevation":"=12.0.0-canary.be999eb08.0","@material/ripple":"=12.0.0-canary.be999eb08.0","@material/shape":"=12.0.0-canary.be999eb08.0","@material/theme":"=12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LlAEX7HyGbMbIk4iVPRxy9Oy3bgTr4RQlRhkLIY2/bO8HhGrwD8lZNhsy9XxIpRKo2Jd/yYdOsLD9ToU6JWd3w==","shasum":"b1d9be5c06c045fde0971aa371e0e633dd6ef1ba","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.9f8337d7.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRHCRA9TVsSAnZWagAASOEP/3PRHHDogyoEIqCAmtg4\ndWEYWyObxF5tD9ZKgCuc1lqX/rflMUaMnQQFJD/O6pDYx6hrMFHgcQoDhmaf\n8LiXlOIS3gF9AZ3hEyqxnUaVhZp39/QISRC8pH9Dr757oeFWu9PZDsjHvElQ\nejnryoftgiLB89vTF3iHEmRfmE9d84O1F725DO1IvAiUGVZ99QT1FEax2BbW\nohAmT9PXgKenPChJ77mwues2UvyD7EZwnQjBO8e+9nIZqOe+TlLVbRzX+eWf\nZa8kqZd8mW4ITyVZ7GIufB1DOAiQdC19o/99LT2JusuIpCQ1qSFep5lPR16Y\nnRrpd3jWqllE9wcp5bzy1cC+ic3JWHxQVppjkonxHXOIrtkpp5I8HdnJwy7c\nPCImbt1lzXfc/c1F4qUBjt6boo7em3x0p1VJZDNOuCJTwPvpMfIoH27NcrWI\n1c10Urq5XC+C4tBDCDEU/dDrTeL8wQNTpYWcj5+aCZSI/WUJjndTErdRa9lz\nLVlL8pF+OSjGj16Jt13E2bDHbkjgTQhXcBHJI0VtulDB1xja71gGM8+y9QAP\n/AEum7WOzmOh49zwrUBD5Sr8Uv+FeaAxVAMfo90TCR3/C9QNvteogrMkdnD0\n0mDmiy5maWkkl0DW6kEP/Hd8Nvbyr0x8CXtmKZjFgaLnZ4fZazqbKXweE2io\nHftN\r\n=MXcA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAw2t7pcUxTViGvSRViMGdDDPM5/Jy2OyP8xbyYnCXF7AiEAjG0CJ1Sry/j5NzxCZlXYBXo5W2W6oyF5v1I2VPIPjtU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.9f8337d7.0_1620153415406_0.39418927128001346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-button","version":"0.22.0-canary.5813480a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.5813480a.0","@material/mwc-ripple":"0.22.0-canary.5813480a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.055d4f10a.0","@material/elevation":"=12.0.0-canary.055d4f10a.0","@material/ripple":"=12.0.0-canary.055d4f10a.0","@material/shape":"=12.0.0-canary.055d4f10a.0","@material/theme":"=12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pGcCKEfFQBLlT+0kdTrexVX1yPOBHdZP3z68sq9DWy2UVIU9InNDMiEr3flNFoxA59NpxB4uIWXyhCVt5lPIbQ==","shasum":"5fc0829e4321c9de922338df34a4eb509df4eec5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.5813480a.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMSCRA9TVsSAnZWagAA4x4P/iUE3myOyl95Hqs3QktI\nmazwN87tuJfuoU1NP21Hvx3SrHeWFXjNOaoSi57kPUrDGcfdSGR7TVBr6I0Z\ngT25c3Aq0U9CdtCaDqcTfgQkL9TDwXOwLxGRxoJCgXTybGc27o0YwtK2HteQ\nFNEBGcRLWXjvCWNFtGzFRh8BOVyDbgYDvXYHL5rhMWUzEMT59xXHk5CC/KHX\nwk6RuowulTdk2cVAutXSd/rZQs7el8c5XzGG8ZzYkpDIuU+6idMlsu3fPTWz\nYDJOwt64Sw3av6U1Tt3PnT4as/HYlz/A6TA2BEVMzHG4zoyY3TH6z/fH+sPp\npwv/tiIl9XLcKKJvHSjZdBguIsBfOHi72HW1ePyrt8GNUkSkHaYvBNBcy+RF\nnNsLuhobVKrVbR7UQcgdR0pZb+XOs1bBzyTfMv43RhCw3W639Zu/XU91GOZh\nOhPuSHVqYZNpbyG7JhSPtjc9LZ43XM5qnRHnkYhWDFJ4cU3dxxzjZdOBNQcQ\nyDy6Lqcobu9bacErL/okXH77qXkIUQ7D7gERtfwfQzxmR5XsK4VX3tF+T6lT\not6ykFRdXHxdbKEsaZw6z/FSTd2Po/scaE/sGYNZIkdjJBKyoxi+UWm5XTGW\nhELez4UDwh7AlJW5EBhwq/Q2zHjr7ihkoayLjC7xJN1saH03GY8jFCH3Kb5G\nDrcS\r\n=oUsJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGy4N61hMUk5kK7cbyvakT3in1RPXNXuppEKHDpoqCbvAiEA2yAQAgATYoCOC3B7bAJNzyPVevvFf8UYxk0gy7IZ/zc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.5813480a.0_1620239121759_0.06353713145627338"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-button","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.ab7fc1bf.0","@material/mwc-ripple":"0.22.0-canary.ab7fc1bf.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.03f525f9f.0","@material/elevation":"=12.0.0-canary.03f525f9f.0","@material/ripple":"=12.0.0-canary.03f525f9f.0","@material/shape":"=12.0.0-canary.03f525f9f.0","@material/theme":"=12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t8LBUye1PXQxbzj0uS6F0o7/FG6bq9ox3xjw6v3lJPxAQ0u8HAn6VttM2vSz4n7wn3MlIcdIFdWCLB074kPHkA==","shasum":"542d5411ea17155edea28b3cc4254a3f5ddf6c7a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC5zCRA9TVsSAnZWagAAMP8P/1iwfROjEQo3uWRGY/Qs\n5iP0jszzoHrYgVsRb6++ZWtwCWLzY6OYdONvhuUZ3hq+FyJdHB5v0w6kNJCW\nPwiOC1S1eZ+CwC2NTmFM6Lyco1D9MNBYyZiFulELLgN3QL3h7ePASVyK6HOa\nWLlIUZQXNtrqlTKgqljsMAHgZXZ8w7OO25LHJpcRWYCGuV5IQqipWI3AARwT\nTslgFzAyyoataBdNlkAx2VhzPxT2AxA/jk0sPLw67zmiF22jvRv9NHvvhGef\n6bTbRleSnTMOI9EsK3VVDrHNMFbRupsz4mtJ18diZOzGrj+wAgFV+8shRaxU\nP9fC4BzGH1M2IpsYPk+fNstMRYtdIjduUC8Dtl6JGUnzIqzd9/VfC4oLscFv\n7+BVKt+bcLjHp1AvCvNEJjbV9vkM9/h1ezKj0Q9UrhOnLPS6DARn+ccou6pV\n9MxMHb76XPQM4UTqwxF83GCZE8M0YgHPxoX+MU9sOigCLDefPk8hpaNm6t8p\nO7LTymy9LSVl0OtXpQu/cEdNbrItTXB1Y3kxlueJskMg5jdy3Gsw6BiW52/b\njWi1vImZ61mFMPdul1idlsUWxpr2jru7yjmAGxHxFUnYejmha9ufn8GVGGzf\nFFffsGQ1hZ2zRAesekCOolwqO3lAkIquz4EKJmX0G6D/6S0AYzNSa+WrRxL7\nOlku\r\n=AJGw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIET/phpWrfB8skjQOlXL1JyBq5RZ2namIwud8iANyRK8AiBUKnSa14GqnCgv1I3TSOHlj2KnNRLEsjWNVvJ8bjs4Uw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.ab7fc1bf.0_1620323954945_0.19148170883097437"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-button","version":"0.22.0-canary.25693d60.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.25693d60.0","@material/mwc-ripple":"0.22.0-canary.25693d60.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sW2DqbWfmQrlombuvFwdI2g4OQUzyKOnm4veLSS3KBL/ilA7pRg8YKMUafxKKOmHH8QLwDup3TVllRRzOWWKKw==","shasum":"f1dab80c31822ece29cdc49aac65a87fff0f2935","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.25693d60.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbdsCRA9TVsSAnZWagAAOSAQAI6ZgJjresL7VAl48YSB\n6cVNGYyibAk1jkGh18OBL09eh0SCl2MpsUqmozx2FR7IgxiFeijqjEq8qaIz\nemFHAjx+Gr+ekDQp0UMcCAy0HHCODjmmXcxm/3JsrO+1puE+SwJGHazkne9D\nmixl08/3WO78iSyOy34lLEMK6bMCtk0OwIUpGmR5wfA3zmwZHyjMvFZjz8lP\nKKBOYDamnmldqWeUTKss5YDwhnb5DTfvnGhiOo6PDfdSVn9w1h3epgqTtndo\ndJ/0YQZ9TEnOkBFYYP/6xQiX8mS/pngEwm7kt5x8MgkAFh/mXYLsted+cvKh\n/1+gLiW4iILUafH12ZF4BWj/zL1dphFDc02FUxZnU9YTXDbI/nLKwlE/lkGo\nkubHfcJoZtM8LXzZC/06KcL3vX6OKYWh3/BJtb+QlFpYH82sfK9zC/JzL0Yz\nc6Kxv1asVnr/TJuvgHfEwaC5BI4o5WzI70bBC3TUh8VZaCYQUm/MStCpWaee\nfM+DpYZIyV07xw48KK6rju9jNWlWGJYP8ymgDtzeFlt/7PmdFMjm/riIgHpc\nttLN4cKf72e3DC/PS5TRtq0uGG4rVFwx6ElEyTY4Feu+dLAs/VtP6YzeBskV\neYPsHBxW83ZvtYNvVRbIOwLCK3i0Qutpch70Ym04Estr5VU1BoqZDbzZ+H+Y\nsMsp\r\n=G1SE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGdGm5rOgLn/U+B54xn9b0shvna0qI/sR6m+Ixlnil11AiARXcbGISskTmGdyYjEzyeaMaRQIhWt4+rCM1vfsnR1gg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.25693d60.0_1620424555483_0.07793747891528557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-button","version":"0.22.0-canary.c497962b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.c497962b.0","@material/mwc-ripple":"0.22.0-canary.c497962b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jZ2F1bK2uYwHwfq7SaWKpuALktJ08CvCT4uzJFRuQyi3TW5mZ4ZNpJw3CJeFPuDSCfAJYuSKd+yunrTdgYHYRQ==","shasum":"a21e94e4f85059466c996f5ea74e8b0a535eb3fc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.c497962b.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0HCRA9TVsSAnZWagAAQecP/3zCvurYvHYQ8Rdau4xU\nZfHykzbjJib7Bxwb7sabI7EExZRNpuLyF94kMfSmsjKeqAEimaRzE7BZOTrl\nrkO5j4sspAdKJgIqN/CRcunrlnIMNLxNk1jIfvjiSwTjsybqvaQZvn2Eki6+\nOO46u9ymx+CDhAAnh0bg+yr2Qnx6QykRt4FsYktV/8yYMK/drq9qzoSkY8Dl\nHunuNXw0tBphNo934IWNqKwA7pZV+96A+5aHpGN6UF9Y2lioIji3dxnLCX6o\nAWX/JhgVWSTlYCqb/xXsweRHR4M1ytmkJToZaXIB7+VvyZT5ggm7Rwe5J8rR\nuAogu8kIm0+CDmM7uII84aaqFNJQH5hug5XoCHC0za1mh4HMYtNmVukOUbKX\nezb0Ehz/CcmPNmsVbVWXIFRaq1X/cQTSl/uvJHsiqceB3FiMvKYDawrHTBxa\nuqVL7JL4CJRRoEtXad9MjRp0XluNhebRyYhKxg/s181vmj6LeBDX9WJcyf5I\nPCLNdj1JwSeSLj6CwILxuvYiBlIGP46BMSSehT3+3FcP0LW53D3gtKxuLNV8\ncTkFQ04HcEiXHxv4l6HXgPIs0U4sxaR8DPgtZXPhklfmn88Tnd9xi/+EWhpj\nEASlp/xPqeZ+b1zcb+tzf6vcnFvcZFLZNP6ADM3Wo/1xWnHOnn2rnO0p9KGb\nzHsk\r\n=I9Hd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+inJLcqomEo72L3YipEiEll3k3AyTLxprUoiuJmPx8AiAIXaA9VrRn3+339mG/EI+tjhDUTq7ShHq/KbPjwCQIUg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.c497962b.0_1620425991009_0.18647139403494273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-button","version":"0.22.0-canary.e300688e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.e300688e.0","@material/mwc-ripple":"0.22.0-canary.e300688e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ceGcr9EL5k4xiLkKNjgh0HlCIk2o9ce/Ex0H8UKPIYuDAw7ZsmmrNaBWlHNycAEl017peJzDBF/lV1h0oqCuFA==","shasum":"6aa07edc98fef107f8df98180ae432461ab9c507","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.e300688e.0.tgz","fileCount":20,"unpackedSize":85280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4TCRA9TVsSAnZWagAAFpYQAJR49uvpDxqwgmJgWjEL\na8XYhZd2BG2DWAtz9WsXMtDXGNQpwXP8sSG0K71aGLiMkqNyX6pekyl+cUhX\nLocJrS5/9mXIpT9/YwrFvuyIN/iPl0a3elFJ88ACtcjPQxXbm8f7Uj+eKPiA\nejamTHX6+QJ5eZf15XzGXTMF6hyu/ez6MXA3PqWJqBU7ZRDSRYvZ+gIUDe/X\nx4iHOcgDWpnEopnZjlE94gMQ/Vhp+zClv2FYeV4/I1juU9Y11KHW2Cq1RKej\nAvduWmACSU8rVIdEc4+cQ4/y6O8MwItW4idlzy4ZPw8Bogj1TEzKoLS9T4Kj\nSoyDHtkDUXyPJAgJBOoF/JhIlJb6+u7HXxwYZPMBdB1gDG8PvrWl+2g3NHrd\n1z2EFgqvKzGjyGP6iJBp4qnYGHtmUDS7mvDfMLGQu6qP14il04bDUBbw/iB5\n2beU+PyO1VYcHQe9yfdzKpF53DlpXeASFj5dyEPx9QTtULANDZWACM0LETHC\n3F1wQzpfetDUhJNW+5q3/DCHIqhGpLCj1JhXA2mlBipvsY375bZ5ne+HIeJv\naxVF384t1f0KdD/4wEjokdQHGnWQ9Iq43IZEBDGZ6auAqcrp8NHvfeSL2tF0\nqL6zYuc2QTR+YbEOfi/Z+XJgu/dCWCaX7+sjRv9YVvDx9Qpm8Nx8JFkn7p8T\nk27p\r\n=qcel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHD4hGgFB/EhZLRngYUrloRtWQc/9nWzhk+EvU/wOBxcAiEA3rzc+0MqCOtOd+3Be+PTU7vlUexg6j0kLI5hSOv9aUs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.e300688e.0_1620426258791_0.18301128113181653"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-button","version":"0.22.0-canary.d70287f2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.d70287f2.0","@material/mwc-ripple":"0.22.0-canary.d70287f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jXZK3lzIH0hibsHgzzfu8KUaim0NAdtYL3g1F94LLB1Ol92v3Twdc2+5EX2gDQVcWEYI0e328bJ28oLjSzvv7g==","shasum":"0f1b14689ea4928055b729566ec36bce7ee11067","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.d70287f2.0.tgz","fileCount":20,"unpackedSize":85231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmICRA9TVsSAnZWagAAhGEP/j+Pzf0BRR/8Fo0EOTHv\n/UxmX5fjHWeGd4d1iNrQKJ9CR7U9CIhwEgCek+MG68Qf+D1mmfNW7/kECRJ2\nKYC7m9cnXUaYU77jn4rmjNGvQ4pox1auu2t5nMwDBOlLByiBZuCRKxK5e0Ig\nS0/mcX3jMSm5wjp3JqYXGTuG/VdT/hYaK25orIxDEA8Ic0UL9cL8b8N0MgSS\nPOnSrVFvgQFBcA/GEB3BUYlwfjZVdUzhHZWTdih4gOQ77jXPeJONF0ddv97B\n03oadMGHedFq6YFIOdMrG+fg3699HXfCIjgd7knVELxXUwQ42d8HghFZncQt\n6E6Q150i+V1V0w8KWwlZUToxK6Vnv507Ld6eEgbGuHBN61N2LokC1bncpg8w\n7Kp3hUO+/2kbICPMuW4NCVkuZLly3dlPmzoP2tnXVsncfeNX+hlRN7Z64IUd\ns/R/zPe6b7KaZdOF5QAYgRW5Cev7cTWUPCMMYD+HWzQBOuYps+RfFO4CmbTW\n/yo8Cy0HiDFKHCE2g6nHulq2hxR9USCCyJ3kKpcO6FobW1eSQid6GWd/xVn5\ngXh9e018t9l5yvHFhaVZLuASUCPE1ynSfcGWAIOKfn4ekYBwPY6Lt1aGBoGb\nEsCIyJwqVQ47vAougcd1fCzNUoXTHWyW8rifqaeb33+1FQgvsb7LG3H+LYJ+\nGFKo\r\n=9Ieb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7vfdJedlMHPBzwOGdNjwkBViSnz42Xl5lf1g6rZF7egIgYZEarf2pk5yUmX3uOLZh7Cv+7bfVM1+E699InAyoQ8o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.d70287f2.0_1620674952396_0.7007547485485757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-button","version":"0.22.0-canary.02e841b2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.02e841b2.0","@material/mwc-ripple":"0.22.0-canary.02e841b2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.869d890d4.0","@material/elevation":"=12.0.0-canary.869d890d4.0","@material/ripple":"=12.0.0-canary.869d890d4.0","@material/shape":"=12.0.0-canary.869d890d4.0","@material/theme":"=12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xFJWr+UV/4sMFOo51ia+SXTL8ST9w1KDUZOrUzhlMWo9KSiF8s3wBeuvi2k15JfiEGv77qYuvz+hxLndyGmk6Q==","shasum":"32cc24dcb383b59dcbf7bb27a50e22d3d4df6edf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.02e841b2.0.tgz","fileCount":20,"unpackedSize":85231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjTCRA9TVsSAnZWagAA5SgP/AzMkBC4gEkYLKErmgL1\n9J5Oe/biD0Zgk/DX4ytBjoN/pH1Ik+x6ujXe26J/hb4eQfIE7Eg2JCQVAxPC\nmqH0o4jqhrABdqfz1KxSvrbSQY4+e4uh79KkwPKp9J6GoVoP+61Vn5xwJpdG\nGB0IJdOB7avNu0VUs9jRKtpx+xwbdL+7x4+fpwfqKDmyWIn18pmb9f25EW7O\nmhbkNZLgqZczESbH9eOcG9PtZ/gjVRc4rR7bNDseGLytW2cAV8CxoLB2ZIpb\nM+e7EglBC9LZZ5YPSbaCyKjrX5BXHPpoD0FGsjHQ775sx7poMQZqL+8fW36S\n8aR0hplf9g01alPZbmqmKV7nUYMG3GTSKzS9HpTCk9a4+m9wd61sYtPS0dn3\npCbg6Vs0T4OYUFGVJhiIo0zWHbhPbsaEaipocwmPsQuoow2r0efCGuWnO/af\n/X6aFAL32yWJ33min55pN0u1ONin0d5UXTadrNsRF5BUpxDjyGQ0msX/t5iI\njNKP5Saqav23ySQXekE2VvB8KfRu0fWnzv3SKIgCkk2kspuTST+uFygB+l/f\nCjzVnIXb533JBnWVZnlnGv1y979Wm5UzY3Yx2JxXSR01wmWSButaJUeCxqDr\nLBWlJcnOXtVtnX/MeBT63vbHRkVNnqi/HxS/qxUW+JR9leJ/eR278OWmlqCu\n/qgo\r\n=Eezp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5xjl+dQ/LW2bY5anER12hWhcOiPl+0If3XRtonqARFAIhAN94LNy+/RcGta8N+JOqneoiTrjE47a3zQRD64wnnTuw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.02e841b2.0_1620678866626_0.7383988609490988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-button","version":"0.22.0-canary.badda2f0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.badda2f0.0","@material/mwc-ripple":"0.22.0-canary.badda2f0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8mzFhFxt8jBEPobMeoRa1JfDJC7tDcWR2M+uHicCYZwa7W/WGwcqIQ9l1z1ajMrSQX7xyMjpvw3vH4AqGTYspg==","shasum":"9c6946409a08038885012e719611c401b1ecaf5c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.badda2f0.0.tgz","fileCount":20,"unpackedSize":85231,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEaCRA9TVsSAnZWagAALv8P/RtKHSG24YxsKhSnoxD8\nJn9rUWFE5SCI9Hfv1MP2DI7yS1xV92z5TtPs3knXWu4NcdLIO4JavZn2Lctp\nlfxWtAV2Pl5a4b23Fk6opLRkhN9eUpg6Ikck6Jpr0eKwI2S3G+7Y+LBdJGhH\nA5GDnFR5n7QRUPgDho9rcX4AdEKd91xCznLAfOtqdjsAhfqURYyU5KcVgaA9\nbPU8lUsZ8O17yXoHT7yDaubWXv1Xq3eSZtn8vA9HFE1OtSpbIyISg9cxhO6l\nHPecin9KoZi1VF52NiP7putt3jb1mFV1a1BMc6Gh78tonthjZu2N2MMx9T+C\nqNkhnXfCMT8jBV8MFDSjFK6wEarI0PeLQ1S3QA0Wc2kqjCrZ3BheI0uQrpin\nRhyic5F8jpvS4fugOF3O4GD7M7ofqMULT0bM36KDR3Mji9XCkMEMqZusNKM9\nTZW+DFSLHNI89ogaZX0OpsCQKr0c3Z03LXxqr3tTGhROdj/qJSF6DDK2cesr\nIYmA4wmkyRPmmqo//nKxnt6Ji4Ljr+YQZMUjZodglBN8/AmMeU6KmtNDO7UV\nXqUHhoUU+88xvQxIvzd6+Ya3HPFOtNCTliCq5Y+KhE5KXPes3nns44Z5V73s\nxnxAhR7pPL276Yk97W4Ze7PcdTxocjd12TIFZgHkOlvOiemZoSqjpJMKAP8e\nq2/Q\r\n=4lJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+w2lWKbj0jleAf+14o8Z8FEAyNM1DV8FJ5qB6ISqOMgIgSj9OJjznR3IRqG3NJvLCZxj7grABMNKF33RKPJKcC20="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.badda2f0.0_1620693273845_0.44483738016274144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-button","version":"0.22.0-canary.004aca62.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.004aca62.0","@material/mwc-ripple":"0.22.0-canary.004aca62.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XY0t/vx74W2l7j4yTFMQjPa065UI5jcQUfWxO0wpqLRl8VY/katCgBYdEiVT1/kkoZYkF1vrwsvZRcSYSERnKA==","shasum":"50951b52977cb1169c6ce679d3a662d51a6b1816","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.004aca62.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseZCRA9TVsSAnZWagAAhbsP/0Ag5LWNSRRglw+4Yzm3\nj0Phvobl7q5j76iBGHVcO7VxNCW7S/qlbK51mW8544/bh0LQRB0wHLiu4Vm3\nfK4Jlwl1xOE9GRc4EY8v1n+Gn/DyO5cRQolskOIa0EOV7fGZUDv/8u/+4Boz\nP1NClFWoh2Dw21PHt1mwsf4B0v8bxgC5msXpUbzdJUukFzjum2TDiEi+kXik\n4W/erhwHbkxUVSLg4cT4DxXACs5mX+nYc2XY9QtE8TmhT7XWJ9Qs1l0m5+uD\nqqWw7jgwqExdTbA2i1qYUmU3GfMi+eH4EhopZ8eI3IDkZXB/N7s9MeKwYvGe\n7sg9uyta4cv6fehrGyAqIZra+DP1Z3sy70gPQ1nkYWwbQc+fxMkHTWS/OXAT\n2LaQ0bKnP6nBbx/T0itKWVp+g8ppDxuQqD0S0Nv21K9+7Yk3ZXujnc0TEmkM\nXLj6olPuVAsA+pSLFM03gQxr1T8tneS0JfM9uC+JfrKuxAxeQQKbC1o2sMgZ\nf7hLaXAFXqA9v4HfLb67L0f+1z23GFdBXJHpHWZ+YjndZaxgvgGQhu/LKtya\nYISOWSE8zZLhghKbXa6f1hvvFhTx3TMKsvw5KUpZnOEOrbphUgEsmn73R6YO\nkaM9pzkBO0gC6Ed1H3dFyH36y3Jc5VWlBodETxs9HmdPWC6r5BiCJDWq98hP\nU0ZE\r\n=roiP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqP73RMq0jR6RY/XIoHh5dv3/Fg5tZr2x94JjUnjEZ5AiAp3lULNFxkAbv0bnaZIb8S7YsT3qNnCsOpiZ/T0Oe7kQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.004aca62.0_1620756376779_0.43147211352882886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-button","version":"0.22.0-canary.4af17446.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.4af17446.0","@material/mwc-ripple":"0.22.0-canary.4af17446.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0W/xkO4oMEP9iCrSORUeuADB9SIgQzFedFEgG7S5ZxVIkGJSugp3jbBK1XMYeyN8AeeZHmwIImUeG8jXC8R08A==","shasum":"2640065bffc511c990e4ad8f0b9d8997903a4f7a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.4af17446.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtDtCRA9TVsSAnZWagAACJkP/1CKAYBpSoN/qZCvZbYY\n1TjPjo7O1/Z6Iq303u5aChoxH0oI2FRu5hvPPk3+OBu23z1a2yfiGhkGfw5o\nuVWbpQf8LEQ64kI9jVeSpN6j7QcDMSuRscdbLSWdt5qQ1Ec3OBjt+OFc8nb2\nmOF0TYkWoRJmCi7cP+qqskCqZWvynbuAdqIxrDjm2U1nJxC6WrbQvag2+k4d\nxvZW5VTOoeIab/+KguWXLgMtVnAlCKTqXu29OxGz41zUAh5n59l3XNEfb3sm\neyxZHf6MD/Snx7bbk35CBQwnXHcCtbNn16IHmuxmonB/91hOuSj8S3j5VTPf\ntykAoTnnLy1ZV4l8t4cnCPD5LPN6hRH8Ayln2Nd2Y+Juq5MAgynMgK7reMt2\nVXNCLhNadDqI00mn5OHWq2oNVbet3Lwd8M7zw+TIBLfupzAAsqnyWNp8ZOfk\nDcEIo3j7MNqXvTxOHBx9vu0GNjX0ytV6y4tMnOZRRJEAopHTjmF3dsePKQWi\n2xMQkNruy1Fj9HcJJZsoaL+JT+iv+ZGOcugmLcUDOxPBKfSGrgu1GSJZFW+Y\nrhI22VVbW3jkSgv0CtG/dLOUzYEJhA63BKC1Y+5mXsfwuy9mt83bnWvawSW4\njwF59Tm0ugxdcOiSvgfMlUFp4GwPxFBZ7622ufs1oQnRXi9dmQ/Z//GOUlxk\nM2vp\r\n=AHBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxXdhVxQTHXLzcrFo6V4Si1n37fIwKUA3CA/OrmKB16QIgOLt+GfZO5IfBMFU4MnVR1QOJcMz66FXVVtxHN9Xe+QA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.4af17446.0_1620758764969_0.3479125112440957"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b94d7187.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b94d7187.0","@material/mwc-ripple":"0.22.0-canary.b94d7187.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.ec22e1da9.0","@material/elevation":"=12.0.0-canary.ec22e1da9.0","@material/ripple":"=12.0.0-canary.ec22e1da9.0","@material/shape":"=12.0.0-canary.ec22e1da9.0","@material/theme":"=12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-r659GJiZNActwROLMEm5DAl2kTDKn1Y9q8GvZB3vDA1Fd77GY49rh50f3CWHWO/hZlLXuInjyrTxfqe9J+DkuQ==","shasum":"0e20a5c09d8404453efb1bbf4b4472c868c3d319","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b94d7187.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtI7CRA9TVsSAnZWagAAYfYP/jFOV2UR8n+IXrcLXP10\nemIoSfulw8/HMbVlT36G+zcdQ8cGYqofhhpLB1VSDCSRI2FNi5Fa9kYQox88\ne/D7uQeUjZXRtUUvJo9aUwYRjCxVzptT8JhS1/h8HETuIfpltAk9PdPtiXAP\nG89bIxVYai6Jxai4TDdKrbfmhpKKYNRffoiE02a2ePT+3hvEgqgHqAgshmdc\nkDz2xBKcXeSCRvDYWslTquxu0AJfipBeIJAfazmpxqmKyDRMrDBjVe6eGQgK\nXJ0Ae9pV/+RWTz8v+FnIaHFOSp8XpCp1d9mwSsshwMPICu5iD46Iv+yM1u/7\nosx4OBo4KWxTJNQYmBdTAT7cji3H9eFsNIsthTLG6VUYGZndQjNt6RD7LBhx\n+xaq+spqgRDrVO5YyjyyWXtrPH5sQV1BkV2AmC7XzdHhi3Z93Yf4qb2j9ldv\ncy3JIgzFKqMTLtgBD5CDGVmQBTK9S1rIAi66yru13Hg6EMmNAGMKhArGZm4N\n2EMXbutuS+wgRD3Agdh7OdGEXP9JbNoNbwDP6zXFJYIrrEi0tvR/SWI61K1T\n8zvFW0OpTMf+MS0Mpb4EMOarRnLNpjRQqGyrT96Zr1uSYr+KD9X+Lnm6xL0j\nfivlP44ctSdU0Hk55VDtSB6AQmS5vfMPokLxTrpM1j1y0oWEY4aNNTRQlxYh\nH94y\r\n=mFbc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLAlU1E5lz0Fb+YjnSXPiG6iBx9hcEzyJEocx0Sn0HaAiEAihuw/WLs8djKKNA2yA25sRB2SfUTWsfudfM83VZvK/o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b94d7187.0_1620759098667_0.556601268105833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-button","version":"0.22.0-canary.4021b2f9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.4021b2f9.0","@material/mwc-ripple":"0.22.0-canary.4021b2f9.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0k8A+ZzHtMjY4iNbVMZqgupuzN+DRYdisI/MPz/YxzilSun+PUHt5RqoCxgyY5tEg+Vv7GrPRdgR+B/yQoDjtg==","shasum":"46cb639aaa73ddffbb817745eac3ce8c83851b90","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.4021b2f9.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnE//CRA9TVsSAnZWagAAtHEQAIHVQkBPNWl6ff/od59B\nlEKYiclWShNJD3bXzEw/V95iCuj8eBzP+op72XU5j40ig9H8Ym2QphB9PzkH\nUnzVrDuac5nEVu2fYu7+wtu7MKmHIZabYxkVSn3nx5G0VSpeijQkrfCgNXvZ\nU/Iccuu/Imi5uluK1hP6Ydibd8G1xscfAHQTc7ermfgqEeljGZTqARZpSWL0\n8Z0OsEzjIq8Hw572iXiEHlrTUD9MmvFryxoAWWTGe0y9LqebS6xK625WvVfz\nZo03VCLZ3btPMxU9KXxAm2UHh9viXdBpXkTSc26wziSN/UHrDKzVNZgtbgSy\nDP/MPWS5OTuzkfiLbV8acJ1kdG7ldmJFn6bLzdDBajxC7rf5pNpDW6PISEJE\nX0Pb8K1gMXMFYst0kmRD/5KK2GV9XNG6963VEzHZovLD9GE6YvrIjKZYduW7\n2qioeJiAotNdfKDwKxa2E0Msy1lEiXc2/WYgaVgKf+Jzrq3MOkZ5L1DDMbMq\nCUjQje/PpBjtbtHDxHM1th3cEeJ3iN7KYXFdHgZkqt0qrPxpymLYhai4AIt7\niiMM6l4sQvmSPKoVw3C9/zjZtt11Yn3+C7WpLwnjkw1VeoGfKR6xrOFsor84\njHebA8GQ6kUSmSFuq5PwYzcbRs/MksH9vWOeCGuRdfEexksu3GXKA9ytA/IF\nHIUV\r\n=cv3g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFtfuZBGJR2au1R03Mg5k7VvY55s63jplQblu/mrGE9QIhANpxi0gJ0XmYbySJ1GR715PNcnncwoZlHmoYxjjiyY2p"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.4021b2f9.0_1620856830575_0.3510559543435934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-button","version":"0.22.0-canary.6a5956a3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.6a5956a3.0","@material/mwc-ripple":"0.22.0-canary.6a5956a3.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-at1MArZHrkMRpLeWNgD9sYq7cwUQAdhwoGm8ivZ8zkKbhhCTpepWeceqYBGLex4igIxyB2bVc1dQz3POx+yopQ==","shasum":"c56cbad97e6c1e808c5ce9aa5eb787c3d36c30e3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.6a5956a3.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFPxCRA9TVsSAnZWagAAD+4P/0bvu/u7/FQ9CgtTIgXI\ntXgX0SYBZ5R0RsSe2FfA3hKl6UEpaWhZMbQiMOTg5TxJgxHAqVpLb1fJf046\nLGu4y9H8tBxaSKfTekxbLPQJzcYUSkUTTu1hquqr8LrGhL7VR952PJvDkwn+\nFfWGmKx6lQa6yCLTmy2z/csTSWPOD8OL05EDvkqrgWmKfJG2TtrJg2od6Oz3\nwwzw85/j+vVdDxdO5K8QioT+GCBxvJy44XuMiuc1Vtc4QoZEr/l5OJhhilj/\n2F+jE0eW1IGQDLXUoxSo7m8bWiSZMIOabe809u67psi0Ukly3b3Y2cbxQU+k\npD69BsYqSv2DTQauhcwKPg19g969QKhLVen/nSTGAmZWoRd8DRRXBzTYJCDI\np6xdEYIO4BCLVYU/s0QVyr7ZxNQ4kUB91AJVZTgPQAu7EtYSdGyemrNeAXFq\nw2BJ3rhAdVef/Gjd7r7qDH2SYlWI0My1d2sTwSfRu1SF/WR4AgEZ67JGiP5y\npECT+aENyBOnfwRfd4Tr8Cj0ZAArk5jXslu2hnW0Bx6G6c0mWebslFjTojSB\n7BM9G46Nx8R/9jKaXe//SdKJyQJANBVwWA4AstQl4UIu8noAHmHNfRIcyj6r\nu1Dr5rM+tOD+SsX8yyWzhTJ6L0nWLFndewdpAwXdF+fn67oAdRR2ufnU8izt\nJgmq\r\n=YGLQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICvNUCXlR+XdhwaceAk9lzFHqDXfiVhmF5BRn/pjNtKCAiEA/pJLtGhFcL5DBjOtRi4NgVSQoUiQM9KL5XqQvCNk39U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.6a5956a3.0_1620857841077_0.5889270101600403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b6e8a74b.0","@material/mwc-ripple":"0.22.0-canary.b6e8a74b.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VrwcyC8Mjv86OXW9K0LUdkSVL44XSihkqhDxl975DSS9S2qTZCDMjtoUacCU4hhVuSpYP+u+D4YUONNz+JtrJw==","shasum":"bca5103a99bb1208f1b0eecc40f0179666b137ac","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b6e8a74b.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF68CRA9TVsSAnZWagAAjxwP/j1QBvifMuijOPEHgQ8N\nh1yh+iXypJzjJ3k4vnQjcig2X5/CKvSifwxMsZvGxFM8nbi+5MJL6QBl6riQ\n8gU5ylHgtuA3hCzV34bYY3gjvPzwurKaJimkGA8qJBVTY4o3MJfoZ+TXHqBF\naFBayvKW/gDBJKZbMALz5MkyT+JdRYzbkYsEGDTGqoGEaP9GHj7qLmqb9Yfw\n4UMROBPwTaDrWmBSLG0c+yk2yt8dizMgzyTERMaIL1zIqDWMN13l2ghIBx87\n2gfJdjRjmjOah/INkXeHTDAHOyLKXeh9OTI1+qTIrZchsLa2sD+xRe+c56M1\nBLP+O7UCP+2j2vo/KtzONQeQWmjuDt5hLa+gv3ugA86eK/mbxwap6AGHuXGq\nnejBDSOdci3z4A/La3v6CBusxLm/qeiV4bm5GB876ptHzv4/MbZtt2b6/NMb\nlDS/RvdyV1q+yyV31gYsqyQtPWxBjLXlZUDjGZMxyt/iaidrXLkB6+myiSRZ\nEVvE9GVZYQ7t5Rc3fLpJoa6c8g3lstQFPIHddRfylfSyp3lmqqbQfpQx2DkH\n8wotqpF3GeeVXtHji+tO1v2g8kYxmUlFan6g96yoVcseG15gIFwJB/deMLKK\nGnLt7UgxF6wTKggHYSzJyW1v1t9nywugvkSSTaOSSnZexojDIANc/+JcMF+I\nZwlo\r\n=jsbT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHVVZMwIu1RMghrB8epWGpHST9Xz/2neqrcOGbmB+8KAiEAxd3qrQLmB2ElFV4fJXmfWdpxEg6SMrGe04mra8LNWgc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b6e8a74b.0_1620860604087_0.8153749559225836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-button","version":"0.22.0-canary.c94e1030.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.c94e1030.0","@material/mwc-ripple":"0.22.0-canary.c94e1030.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nhQf9CpulRNO562x2GtIuRZpgIagC+jsa8cKe919jmRILSWQxCiK8S/xT1zffunZzVPMcREaXvYqO07oHA2tEQ==","shasum":"72c2f71c4473c8adfe94584ac8a773d303664a41","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.c94e1030.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGAXCRA9TVsSAnZWagAAp2kQAKHMnwqB1JJnUSDdTY5G\nyYNjdz+2+yxOXcavnMAY2yZCaFqnWyPEiz4XJfjC3FO1YO2oaBPFB1zTEqS2\nw+FKInYcVZ8K0KUrYDfBzTdgLrIpupiJz2WkMANuu/iQGcxM2xLES3wUWuhe\n5DsderMnj3X/sratSlFEmjrWipaMrpTJxkbQcsXTOYK6BqILsQsHGxxPsXUy\nH97o0JQl/fm667njjFe7NGftDdYbCbpt3vA37CgQBX9eaJ+Sg/hxOxiWxS4L\nuo0MW1cc8BvLwNSwT5wqFKDgt8UouVuEkBFyCMtLp7Qkp310PdpNk6l9Bl4s\nr5MyIybgq9NvFqspAVQZ831G6YYLLd1v++J815apFQMdwvuSB5lI3DkLOcvp\n9ay2yx9xbol1o8w8bHIna844pjNtga4MJEMmS4mf+0+c8TwKpL7t8nbcAQ4t\ncSAxVLYo89HI0WcF4PCv4LZQTVmo1wZMXa7RGnQNZmqC0cqJEDCleliTNSh3\neXhlt1cxUdzLUsrCqkuWkIzZTomY+itkma8KSANq9TnwT8/P4PGjN2O3mOEQ\ndlgQZYwbWTnKUDG8txxBJWuwqpwEilhPxz4zQvFn1todzjxJERDGr0YHMhFk\nelGEvBTs28O6lwQO3fHQyjRXuCzf7Eg+Xn/yjcNJuILGLjmlw0Td17gWYDGf\nxqqE\r\n=04Wf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx9xQNqQiV0oz18PogJiPDpcsUMq87NfV+S3fjynIydwIgSfWoTxWn+5LN1zPyhJizrO7czlYwJl1NyscvReYZxFE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.c94e1030.0_1620860951125_0.4147966586794629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-button","version":"0.22.0-canary.40a34e35.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.40a34e35.0","@material/mwc-ripple":"0.22.0-canary.40a34e35.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9wtzIRcx8AVB2f5/78F5E8fUkXaQ/dEY5QxLQ4TRe293eRzRVAlpB/2Fmoizkl5HlKd130I3EkduQft0el/UxQ==","shasum":"0e2a999cd20ecdee4154389c7d19434e6e63eb20","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.40a34e35.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGufCRA9TVsSAnZWagAAOmcP/1q4eUrZQjXr0vVP1D9z\nOO7dzbI1mEFq1aSkv/T0YfmSIM3OvK3AzYHzSBByKZiLdn48KeCQAm4ukxLR\n/eru7py4OiwfcsxkJ0hTgtsQVjIpRNrwpUGhpi3pw11aZ/PPUMsaTWi9TLCL\n8DbXfR32E7pEPDc/diniUwRNYNdtDVDbieWsXdo8Ms3KGNUErXlrPx8IQARc\n+PVthoMIiE2t8KxHQXpbqSPT2McNqnHOvTKN2cvgNlQVfYqIqSo2QrlL120K\nO4XHknxJeIl/lJxtZscumBhyub1x8R9740KH53irrs+1sRqbXoM7YpbluHEQ\nKzbJeL0tM/d5RmUHgdlsvlApjx+BkQRwwCKszLY32djrTbNscKK08BMzghl4\nHIC29ftguGiq+AuqqEa8xvOtT2qzymVlvXsJHBkN834rBXxL9VJqoxLnquJT\nbXChdWXXEDXsxiln9AbD1BwSjcGYWZ+6nfJZStlL82USBXykb4MSwTkscNHu\nrqZMkpSNookgL+fe4P2/zvG0MHUjI3YGk8ANR9VM/6EkhUbeYVM2jDO87NfP\nmOkDpyFW/jTEzKN2RTF4c91O7aj/j16+dlEO6JtmJXfxFoUj0cB6iMv99ygD\nfsUNXWIBCae9fbTvxsKtyXAxmXSEkUQLKOTVeS6fuPF1Z61LQa7q1Iz01Mpa\n9sJS\r\n=XphD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBzgSIO/ZMWqvwvF+vT0tgZDLj6tfztavEaKPfk3UPSEAiA5iji5288mOiaIJv6WHq5eN7iKMcKs96z2PYPE8ysyrg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.40a34e35.0_1620863902781_0.4707915689704196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-button","version":"0.22.0-canary.1be14d2c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.1be14d2c.0","@material/mwc-ripple":"0.22.0-canary.1be14d2c.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.a23ecb682.0","@material/elevation":"=12.0.0-canary.a23ecb682.0","@material/ripple":"=12.0.0-canary.a23ecb682.0","@material/shape":"=12.0.0-canary.a23ecb682.0","@material/theme":"=12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZtpmgBH1GFoz/oj444BoCX90ffdHFqg+ZDTeCr0stn72eLLEQzOyIDmMDbwkEUYz0SFDrYo8jkOnmUa5Vxmxrw==","shasum":"e557c4e5a2c4a6d35b6d42223c53983c4fffd333","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.1be14d2c.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWa/CRA9TVsSAnZWagAA+FQP/j2abgBmDhRN/icP6G2Q\nzEV1+S9AmItgOHC5GHB6uDQH47dr6w/Os9h/JzLOwOayNbK1IJ0tyNi/M2Rb\nvESq6fKI1zjRqjCQUyU5eD6LOB3gdnlYeHywE8L5iJ1sGSHL8KL5q9WhUx8y\nvbTDhPpjqtuUkoopnSZG+7thtQ3vFVKyP/MKc7EYWmOVJ6GOWkTYEYS25DI9\n0eO6qQktuRoCFQzgCINCaK84cjbmlT5bPjii5NnAO3Tp6F9vfENYMJrEiQFd\nxtQ+ab0vYyIkcIF38549bpNYzwo6cxiH831lTQketyHLEseLxZ/XEX8A38e9\nmRHv6sI4LGQq7EZLgytgtMsgMbG6AAUFLCl575JQtkcUrWhLlJf52nrldeKf\nQ3gxaic4p/1YyoZT9QXPW/05ltZgK05yeBxiR9Q5eLZBH2J24mAkcy9QNJEc\ntWdJ+Lc61/sGGZUXilmwuBNuo3ENrALhUVb8lYRntz71ioqn/CGXfeXDnJPy\nJ+FP5Y9y91nWyKDhJUymK70Bgnjk0CsIxxmAinIljq8D9tH8dd3lrn5l/rsS\ncrPs15IWN5pMv2FLzajNLjUa6Bns1wG9yDVXIWhr+Spr1NDyVdIjwZ/7TUEz\nj7R2L1d6o+cHtLVFQgGVv90NMQ8q9PLgARmbXPE1WqpvhudjDgiomWD9/xuq\nqKto\r\n=CWoC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfVrrhdy6G62iJocOJFFmZahx3nCQxxqoVgT/ku/tb2wIgNikj3X029EX0EQNufLJutdan4dMEtSTibdI3UZItDR8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.1be14d2c.0_1620928191477_0.982232794443205"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.87dbd64f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.87dbd64f.0","@material/mwc-ripple":"0.22.0-canary.87dbd64f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"devDependencies":{"@material/button":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XMkTs+A01IA2PESaj70XqHtVmsrKM8WNaxt2dtVId/PP6YKTH/PqUnVHCXcb75JcaQxflBKeqnAvk2Jpco/pmg==","shasum":"211f3a9558a863a1c32b247f2d94dd2a8c32c159","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.87dbd64f.0.tgz","fileCount":20,"unpackedSize":85134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuRzCRA9TVsSAnZWagAA3cYP/iEGdDxdfd2/PF1jzDwG\nA8IiLsH6Hg0SftZ7koGaBsQhqAXS5OiztkvbEm8Kd8om8FwD0mjCGRRZ4p67\nI9Kq0Ps1lXd3aNaRd5D82QcMoAOUbSYfCuwPlarE6hK8GrSFP0KMjBjF95u1\nugD6lEc45HuAIvl8b9Sy0MGn5KCUVSE9lxWNskCejt2jXJ9sey79SOv+7rl4\nza/fsKxEkAFpedt5G5kXiW/jNax5pa/UtMFn6oX08VF9trw5u8NhNJUvqBLH\nkMijr2w0LDKMbDSEA/oxU9VzLehGHyayUJc8N2NYAqefqe+tBwJuTRBK3pWv\n+eyAB0uVMzYAz2Njo1KE4jRhNMm4wPCLT2X5fmYNu4a8tIXmZxN4zIKLdxrM\ntfiShJPJpJTCNSNRVqr39IbExWxuYZelc4XRdvm9K7wcjlgDLWLTD9YzbCcX\nVsosteRn6iRiW2KBIT3iy1su6hCISSEcgWctWsGy08gFHeRJhHeRnz6FgZ1T\nbDVro583liYVmG47qF+86G0FLHhwpr0jy54XddpO2tAto5UZV3NsOPU/QHRX\nNNscfu70kK8+vhbvmrwkwkPEMyQ3EmJhl2frYeYb1BPy4jU36AAMTwvatGaw\nIo5OL2uhKRS9s3VXQE3mWOE3Kf3mUtHyoCoah/WLO9N+x2sWnHGcEecwNY0G\nRixD\r\n=Lakk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfV3xJMHbzpn5JR6aYPO++MviTAkYHFkJrG0oyNfsavAiBI00cx9WOEf/nzoyLX/Cb8KYvhGju1wjcJRGetSJXw+A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.87dbd64f.0_1621025906819_0.7114172948834145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-button","version":"0.22.0-canary.c452e4da.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.c452e4da.0","@material/mwc-ripple":"0.22.0-canary.c452e4da.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+TEnVZ9uYUAK2jd7JUbvrzEw19vfmj0GoXZSKAOlY1M9JvKFnYymoec3KBXEKuGoQsE89T/qfIAzWD+zKnYVBg==","shasum":"e4d73204f4aef7fa137dd83e0276dd14d15d97d8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.c452e4da.0.tgz","fileCount":26,"unpackedSize":109633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgovzyCRA9TVsSAnZWagAAhnYQAIo9iLzwyXlCigpTK6p6\nB4H0tv2kH8s6X+Xh/M8twuDG4ozOXvuf45BjT8uhD/W6gzhOX1fUSrNXbtOg\n5L5qqv81rbjrCvg5H4oc0BnxU43eOx7izg3LT1A/I7TAD1y6KQKVTpaTYMXi\nNOAaIlaSuMDK1vULT36Fye02SnRY6xj74uXaYQqzuQXBiKv33ODjp0iypIBt\n014UziLfqKmBPIBfWiboAb6sjsb5yk0D1ZdNWfHg9Yzig+abK6MPMcJNh3nB\nc0uRUKkXL9OxvRlduA8mWnAWCGT/WsqQRj32uvr/NgzmV86lg790X/rhqn/u\nZLKA+MKoIoL2p3B/FMfKnmbVmWq7vHwZauqSs9G44wMsWddreqAjxbz2hmt7\nQbNFQGzMqbn6/cQ2z0OspoPGT/YPFmqIuNSDqC6PRVIIruypGIUCOu5utFla\nAGaagH7Ih51QfbAWtSCd4n2ZptIc3VqxShwj4nApK6UOsBvxGPNoh43i/nKF\nvIyv/P+VMKemBXGf4hntZlbXIrQMY5zMA9bvGK8yqeP5qxK6qmG4PUieAAel\n9UZp/+xHipcopGd1f3yw4B9g7JVsD+lZEU2EbHLNdM90tYft6siAr3h3F8b0\nnvxkcRVpkcfFbIsREr9B81B3ssAeY7vrhGW096YTIZJYLwlVjfaP5WP6RP7R\nvgkU\r\n=uzIC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4lDwIABAvh1GPqVnVlaF0oShqx8NektjRHXBzwRsR5gIgKcXXQkINOzzaazDPyDx0eUFAXAsihSIMfWJBjWtofro="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.c452e4da.0_1621294321913_0.8123854109045108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-button","version":"0.22.0-canary.2212691a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.2212691a.0","@material/mwc-ripple":"0.22.0-canary.2212691a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aF3FTMPWeb23keEJd7qcD7RoH/7eroRn8t+f5p3y1vGDbMfujAMjGFsU86rsjvLXpWsO4IDBMTAOS+vWQVG4ZA==","shasum":"ae5e149766cb0852b7c01a358e9f506f9c46791d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.2212691a.0.tgz","fileCount":26,"unpackedSize":105072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHFCRA9TVsSAnZWagAA5QsP/2G+FhznZH1+9QRwNdt6\nVJqg9UUnVcIMA2tdIS39Jb6cZnFt24DnhqhKalB/ugHEAXCPvPculzVYgH1C\nNl0M9qGZ6R1tIkqTQ8Yu88cG7LvGdrvF65Rr98atfjBTSwimbrHPxd3LqqDJ\nfUe2sBAOlvRX9DHs0yljfBVf+4O0mKp2vGPnuCX+w7JVxEzWLjRItfZcU6l9\nr4bj0ytdQN76LSCMSwwCVx0NAFrWoszYuXC59LgK4YbZJUxGLZ7gkx+y3qJk\nL3lOG/JCFuwNYtKFn6fd1acAb6AgJ/VPL+SrqC0V92RnJN7dtIiQFyZTd7jm\n+JPTKhnPOtdt9ecuqgdrUj8Lnb1Az+xNY9LNJhaPZ2BakOIS+WGLawA4VvfW\nZyYSY7GEtJHOIBTWbObWN0JcgnF6xTwPr1vk3EH+zsrgz6XR8PWrCVQ4I6h8\n8MrjPv1GuZjmFBkX+29WVp5JzoOAsqd4FO6G5tugub0gsmODFiUz5wrjE0Ol\nibCIgBJvH/Oo2kmbxZgMg4OzuYJWPsRtYoMv2L6/OeAvoZm1xH2RE08CWZsY\nIo9SXpkSU1LJYh5tkQ/c4MKKfvFtALycRkQUDBlF0/PFrqtviLbinV/QkWub\nDiQkGALZOj67AGCDkNKOeh58KOztnTX57K2R0fdnzARgjYZnikp0YQzjJDri\nVHGI\r\n=yy18\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsLu+1BMfCjOsed0+UfBM0YU2sFtR1GkDumoxOPkpCbAIhAORx688U/AW8Tq3Kc7Eq25emqlrZ42dFTGYFfDQ7U0Hd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.2212691a.0_1621295556925_0.39514171381273333"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.f748ff2f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.f748ff2f.0","@material/mwc-ripple":"0.22.0-canary.f748ff2f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kCQ8X1ccEd8b+oeGPnfP6o2HRzMlgAwwZMXkWtix+uko6L2kmTY79WAnteuk2mUzw9XCjABsS4dcOEokQ1kwIg==","shasum":"3e23fc3af00ab4618be575d203c722f0213c4f69","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.f748ff2f.0.tgz","fileCount":26,"unpackedSize":105076,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjECRA9TVsSAnZWagAAUiIP/0/5m1QfF6t2e5+7l8Y+\nji7xcaFCBxDzVqHttjoGtDnTvH5uMoDzTxJAqZTDJSVllBFDQrvhUG4inOzy\nxhjaglx2Vt7WCFC8aUH3n9Lga68LcSvnQbmOAKJoCStPfzBLNSqmvmxu3EBV\n1gJhm2abDCAXbRf8QV/fgeEwUYB/TV7VEPkOMmeNYB1ln7M99wUo2EN71TX0\nt/85A7+9ZfFTb9xNbqUWtKdoM6xvxUTT7eCY8oob6fBS8/zZnpx1hV4u6fJc\nfI1SQKLu78PBwQYWUqUdooaDRB5A6RL6AmN9tfnfGnlGnPMX23ue+CdL1fFw\ngF10C5EYngCTras+vtjmTdnIQIh0l9Rey2oFHuJTEWsE430JGTmJyE2wkUuE\nsFmMP7r6o0X0IZMvkWozokv1LeRvStra6+8rxxGI03m0tPvL+8ZBob1KDb/4\nyRv+XCToQq5qdSvy46ViXSioBSI5XjgCxNQj/Ms3JQEoU+AJl8vn9ffDHFTW\n5FKPu/MmE2Nx12ipS0Xb37VWnmDw1kCPPD/5x3WQLjLbO6B32IPuyW14Ugzj\nNAY5SCWa4hSA+UCW/BdMwFaACdSIaHDfAxovevByNYAWEsIPslLQ0VPKs7lj\ndNXbk6Bt4gGlKdrL37SCR575Gq01ndj/R5Ij3ps/e4kgs09+1LeDRXePqiOM\nMOSG\r\n=OAyy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPbIzBMtF4mqU/bwVK+As1dBRmPBH3S81vbcjqGy8wSAiEAi5XGTwWtCSFPVvYRpWtPDd7A4wrCKqyKZ1biBfLnUy0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.f748ff2f.0_1621297347709_0.46585313257105687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-button","version":"0.22.0-canary.cc04657a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.cc04657a.0","@material/mwc-ripple":"0.22.0-canary.cc04657a.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.1a8d06483.0","@material/elevation":"=12.0.0-canary.1a8d06483.0","@material/ripple":"=12.0.0-canary.1a8d06483.0","@material/shape":"=12.0.0-canary.1a8d06483.0","@material/theme":"=12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xM6VorfSUgYDFFHYr5GfzHFbqcgz0j3TE6xR6dXkJQTqQPFameOYFBKn7TKu2j5674+OY4QHeyhw8/fYaWeP0A==","shasum":"9640668b340197325ecc493ddc861bc215c117a3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.cc04657a.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxZ5CRA9TVsSAnZWagAAyvcP/izjjjqc+zC5T7r1x6wc\nAqDOtZdmz6lb5xXlLcP9Uxl4/9vo2s9aj1ke8+AgdrvFY/ZtHKXvdCMMiWz0\n3/e4IOypM8X2abHfML23GG5AEaS5Sy1V1P057YEjXLWUzxOhcoBDc80PukhM\nwGsJ9na4bLgPTbfcmtcEKPAtrsW5wQxKgKc6FP6RDKSRN32lmDhe/uM3Ufuj\nCZyuExShK3hlU0oYj01rlY7UrOf0QqngEh1r5nIAkVfALvj9hYgpKA+7yjax\n0nUGauscAIrHjNX6eJWyAOa33uomcYxrMZ5Tkv2bhGoeBRe8L7g+I7KIVP/k\n2KWWIMQUyqc0yeQOJGMqM0D2G+ac08NA5Ao0WJwzbZMrqEy42GSJVrO7Y45T\nzMDXPoDgCA5y+iAUooMIklSUePtOPIYw2W6MW2S8l8RR6GHRLu85dqKkt3yL\nv4zim6MLDVsBjNMOtSV6D1c0g5NYFpIAcI3VM+UbmoOmzAUfSanBkc5VeLRF\nUCEFHp8qkjJIIeY2fdT5UmK+xOCgxlExGwWmAtNbsjopXo2OOMv/07D4qUVa\nrkcFOVxC9aWInArUVbGxGMa6zCJdDA98hoSVCRXj7RbAta/Fx8/8j9r7KFug\ngowqqtuQ4oGpuXbCs4YpO5ILmJZNqu8JlQq2aBVN5+vPYhNtj9oM4utkJwp8\n+Dcm\r\n=KhRf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIESir4QbSIpbA+B2vPnEEY9LHDHdYWlptHXf7qpjo7W4AiAY+9SqmDt2gMbfWehODMTmGXiBA5fNmCtqeEqLHFkqSA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.cc04657a.0_1621300856389_0.9570938961264754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-button","version":"0.22.0-canary.3a3114fa.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.3a3114fa.0","@material/mwc-ripple":"0.22.0-canary.3a3114fa.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rlyUEgepduFE55YRufCPVa0kT4MmqVByT7PBGfaDu1GhT1DQjZgoircjm2M6mCWjN+ItE5UZoF9BmrQTnTq+FA==","shasum":"9c6acab1af3b9b6834cfe85b0d958a825767ea7e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.3a3114fa.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHcCRA9TVsSAnZWagAARlUP/i5DvUfv/BAIjrB70odC\ngVorYpQ+dK8dzyLdUleMO4v2rBaEFcpuaFn9AJyjwv/VBgNgKoVN5nBt6Mnn\ngDuFPDloSbf422YYFHasajM70ZJzqdAsSODGbyBob2XyfvfWzepBumpOGcRM\noBt2c3fFCQoze47s6qBVTWu6NSoUQVvxs8G33EmlWWH9HFKL+yoS5emVPuw6\nk2VI+WAXKtLYygOyeciF8mVTkKUIY2FYY7ma7TnIVcbywMTDSrWSmLod3raO\npW+fuvgxIU8vz/LicNddyabxLdSxgrUxhcyg1KiXYwVB+Dh6r6XXsQsG/c2S\nz4hClH4AekH46Fv6qFLGhEnRBCHETIjOcte/4iswuJ9AYyNeMKtKV0mT1Xva\np1H34mzow1dRK2UN3bNdVkWqyJ0yeT0RUmRNUiUr+5mkc5lwN5EGGzmwoFvn\nfVCe4UMZl6Rod1lFJkqTAYwWphGNmarV5nDOq17zjAFNfUIegOFe9WjKDrzu\nkYkwCjREH7q6DL8LGCQAT+QS4035Oiuhsyftp5WJpcVvAl9Nt6ltF1n298jc\nI5ySwjFYFIXyaU6HXcP3OkKW4nERY7cWxtWMcuc8wJt6zhHZpHm/hxwFnvGW\nYQNzns2AOYMSalVMjtyjvttRnlDwWzXi2rzp+4+jgcUItHSJ3TFawoUHQQmS\ndIGc\r\n=9unh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaYK4s5I8FR8xCUiTF7G+xTApJcc9lW/EQsQ/WoHeUgAiA2m9xJ7Uvlrj518MCYRgDM4yoOqYnhZN6URL1oxA1OJg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.3a3114fa.0_1621467612491_0.6017276215616063"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b46bdf83.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b46bdf83.0","@material/mwc-ripple":"0.22.0-canary.b46bdf83.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Tfdqvdrx25dIahahGKMDxDPGgQzLXO6yj+8+m00c2PUfQZQDRQ/o2frvwZPBEN5wZQm3vVbiSYn/nJKY2wEKNg==","shasum":"9cc67494326f08ca95ac7ef45f6e07e119d4f656","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b46bdf83.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCDCRA9TVsSAnZWagAAbJwP/0+4lTpkiI6Y+wZVOeHT\nNzMjrsy5HF2uTZ6cVdSZucVi/qSmtj99I+Kk/xj3UxYvHUatm090zxjPZOtu\nDq/Zi42Ig2xmSnCtqUaRpOsMKNN47ywr3bBYDM/sV723fakEvKPXY/npSG6j\nBAW4DKqu76DkPhpOBNA/hhoEZt8XMaNVAtURgU8YL0hicM0fH2hOAsZmU/Rn\nRuPI48S3sx+jU/v+dHoNwN6mSn7UkSJP3k80BFJ0n/fCUGNvLxFpeiSPxDxd\nS3eCuwpyRoGCI1fE0a1iR++BsP/6Yzgh55D0CY58F4WIIs7TrV+BAbDHON5o\neiw8G4cm2GPOHqasS0cNKDAjnyKAac0bTErO6xlPuy+o/JLEY+rOSYoH/jYp\nHXqsNDTukCVbkvCaq3u08jyy2rIC7S46Nx6jUkeMyyGu7jXs+He0D54r1vlm\nbLyvaJSIe593qZgLtJAYkutGP0rGa1BNoB9zvO/zH2Kilxca8VONmX1K04mb\ndW5r3fPQSZehejQDrUO6PNJdx42/EWtnGXreX1y6nXJeXqK2JlGt61G2g39V\n7l1bY/1djqs2DNN9KH9xZ1pRmmh+V9GfVLzdGHjvuEROK5AJbE0ZdVPLG5iG\nFR6qmJ6jeYdzxV9ix6/upofdEo5nUqFMnxqw9bm6lk+NWi0ylpvAIHNNhEnt\n5AZT\r\n=XoAN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyeN5pMYociaT55MXKio50cPwyRAm+A++xmFPMxMNRpAiAptS5wy1E3RCZnLMfIaEfvBcIYAwTjxUFaxO9+Jxzfvg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b46bdf83.0_1621475458987_0.9539931532482879"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b401a081.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b401a081.0","@material/mwc-ripple":"0.22.0-canary.b401a081.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-10+mGHQmZBqnDsidsMIe8Ppk8B4hvAVLT0QO/WOgGGkR/Y2d/1EakOXDnyfsWvzJAZySu6qPq0Eo6Vu0wmo+iw==","shasum":"41c8cb14ddaebce7bd59d284097b91a4b20b1b5f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b401a081.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDSCRA9TVsSAnZWagAAOOgP/iQkrV8CW5JcRC4RZO4o\nuqaHckQDsQlAalWzv7RcDXejl415GXzilKeiuh/sJRF/CmEqL+9e49iKOt2/\na92hf8TAo1xhd/jzQExnI5Lyiwu72CB8NmeqQ1CJVg+/2ASldJqDG2BCbbGF\nLm44I8GNz7Ixrh58fJom88d7bOEXjTL9AXV6RkIra+2FdGH5GMY2OIiA11A7\n1v7hVOdev1LLExg6IuJ+c+9uUCLHy45wL4bg/FhtWoqc2JqnlSZNZwCeRTth\niSi4kPIDtGKUJCQ3E/czvcyYkTL7GONKsKUJ7aBu0d/WiBwK2YiZuIkf4YP+\nrQ8ParrGoM5Fj6yV/Nn9gAQYgGaOAMUrfxIgt622HzkhSu4sVjB5pEkLQSc8\nEk0alwIFXoU1b4ahvgmIZeHssbKRd5r/PzHUCveTjDV2hKu7SrA9JCcJ7nD3\nl8FV5goXU4OrdFEk0KaEZWU0XGjpRoGZ6RomxqurL74LcTz16AaWUVipCPZj\ns6fLVJEtWfaWx7N3qNDKGylKsHaT2e95DMAaCjPckkhFnX4en6JHU7pOp0TX\nXIcVM77K2wXHx1hkaBL7r99rJ/3sCMFuNv3G08Zzeax8MadqcC9Cx+sdqpmY\nygPZYbEeKdVMEz4lnHqXQ0EHqrkfdoUqMfvgkS/LUjp+wq5kEq1ysCwHz8+g\nF9A3\r\n=yKGR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFvDyGFxnKTKv+ETdQ59V+J5POH184cU9ktQgFcCW70wIhAJZ4EMl8an6hxb4E2qpyeHxAfVCja61Nc5wuKejWT5sw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b401a081.0_1621639378153_0.7394745161706087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-button","version":"0.22.0-canary.012c8dc0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.012c8dc0.0","@material/mwc-ripple":"0.22.0-canary.012c8dc0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QVfknt2LuM+3k6PZFNnqSfFI8E30w0ogBhPa6FlVG0ziosB5TF98aUlR5lNTOVnl8dIhxj4cL8b3xrEIEBkhiA==","shasum":"fd20720ada784c08352cf1302bbfd2c52da94f9e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.012c8dc0.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1aCRA9TVsSAnZWagAAL6MQAJAB4O+oFMpKKDh8Ycfy\nWEZ8P9FZNbmGSAd75QDZAqdI/bmJ50pSGXQYeMQE+vZOjJXZAKXaGLP1VEnj\n1mZqiVjwBQfKaEDrNpGDftciMEyFh5p8yH3T31Hvp2KL1bftUCPCGJb5Eumg\nDIZKL9ODomCmxRTsQzC87TX3v0FdsuC4Ht4eZQ1cXgMKsOUOrwt2+rBU37K0\nKp3zitNDXqsOilMlWbJCdJ0gS42xWucCHAI94UWCqwYdivrQa9/MfHXDcfWP\n+CrqAVQM5Mvxxs0MiBZ+GzR31oO1kqt0LIOlSFzQf4n4/gZteMvQDijl55YR\nP+aJ3ZTNXWuXFYGZfTpOSqwqF1PXWbJDiW0JnIpqH2SdWJ+wMIOFynLrvG77\nizBj165VDjio4D1l7wV4hdZFUnBrF86AWIc6XuE+ad5Bwc1DYrTy4tmcGqED\nhRsjLFcvJZv5yMFGgPj5+GUyuJYLOzE9wR++JHApZBkMxBMnTirwJhg3Mt4J\nVH8c1cXxHV5z8kOADi5nXXsn0clfmKLbpHo6Om8QQDTQfaBkyoPJ6Z0dPBac\ncBbIuCQXUjdQM82tKD7AD1RMqADCE6ACfLbSX0pRANwxU+613PaaAQrJOVlC\nSapRmW/bmQ1WioQuvwsZzZCn/97HCuhK1VGmFzN1KSkLUNlgSLKLXYFrZiFc\nWzTQ\r\n=ArZB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEVDN3gBUkcl3YGHnX2dkFmrcKoQUbP2v9eGNCjnYxANAiEAnrlK7zuHi1j+jCmBJixHLPRjE87EtTjskRSvYboJwMo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.012c8dc0.0_1621642585786_0.5157325042514354"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-button","version":"0.22.0-canary.e01a1731.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.e01a1731.0","@material/mwc-ripple":"0.22.0-canary.e01a1731.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R4IV6RZ3OJw71k9XEAR+6iQ0Y+c4AlcQ04HByDqGNVZyocB/mf7/50Uh/yPa7p3j9EoG2N7W440YyMnK6gVbAQ==","shasum":"c88150cb2707aaf73ec75730da13129b193716dc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.e01a1731.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq84mCRA9TVsSAnZWagAA22YP/2J66r2tEgVHxVNhT297\nC9UdbMbmjJR1WvL+jEUJ42/FJW4MTsUCzP5JNTpcMbIpscBO4XwvHqbLNQwV\nVbZrzUsmwIXCu8P6AAmkgZBd3bCFmU8YUiFizg1MGuQsG5ZuBmPw3S9dFqlG\nNy0ai9lz9SzX92Jpll9fIzVquONasNiF+mgE6M6uImJAvm1OU3vO75oHOhNR\no2oGTcmQr4JAU3sgoCNvLFP2ifiv+U9ItPdkPcqWQsUQcwqtmlv4/ITgS35E\nr913Wwaus/Ri2jYfe2OL6HrFYV5zSSFz2sA+OEliwMJ/YeZye/LZL3mO9ljM\noTFXTOrL/kVAt3/vYJJcWhBfMa2KUIBRwJRc7Dtouc6Yde9BHDH3gB3VlgFH\nKuxNIuL0RGYOc2IZqvrbBnw3wI9s852hhMmP2GT+JGeeZwA4ug9h1J2klWr+\nw+jx+JRuCe7D683IRQWNsocShOMrxAHiihICVWH9KqzzOgE3HAY091ZPPF6b\nymTOWk5qWiCRLqjb6Ph6SX6EIbXHUH9xBNDBnFC9sFj0e4+eN0Ol+4Jc+FSd\nUOOsSCpz5L6XYJ1NCciDpojjt5a8kq/dwTh36ZdZBQOF9XM2HJ+bsyfJIP0r\nC3PUWSo80jp1TiARjZ++g3yIetML2WVPV8bSoqg84b2JIszJ2sNrncprjET1\nEdXd\r\n=qbne\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDjGkq6epAZz3AMCiN0i2kyWJJq2dto2SNXSelmMixYwIhAOMhQdq+hzLGRVvrnkBLYOl1+d0i8mGV6+Upp0yqME7v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.e01a1731.0_1621872166411_0.20541445557010962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.59174b9f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.59174b9f.0","@material/mwc-ripple":"0.22.0-canary.59174b9f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MjgXo2hsRmNnNwjdrvhynCGz46ADRTDGaiOoEUkft7lX+Cl7hE8hxz8YRCkTde1xtbJkxm45jX3YWxNNk3Gavw==","shasum":"91e720980ab458bb25c29814f5e29b044edb03fe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.59174b9f.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTulCRA9TVsSAnZWagAAS0QP/0j6LRltR7dwqq+1JM7N\nBapkvSKi14MvNNxvHcikCFNTMWLASZgomYNKcApxClJEuieLHKOK38C5g3fK\n6tGVdbCD4ipkOvR8lG7xOSM38JSs8199MrOuU3KZXYq2TQLIUiIlkqIm8ftA\nP4CnHbfoGDJY36DNPlxsgALyGV1O050aFNYxLIAF6y7JalYFS2DipKqVgiDD\nO2C3+BXxtZpGTxIgicKL6QiCnwAt92hBVFr9ZY/bq7pXZt8RSrAGcXei91U4\nGL2jmoUVlrsjr2Ke5u+0qkOIPitCbgNuBK7DDDt/QQFs3GsWd/nZOWrhR8lz\nvXtpNKjedlX1mEd5evavdyWZM1seGvNqinp23hGM8in83qq9lw0HsbR/uLc+\n0+A47E5gCFoPygx9tqEnDdKPFbRWxKZKlUF0JHc4zuCtoBtrQVOSZsKnNkwk\nZ400ZNufhKTYGzgEnVr83AXutytpmQM+7DBKVTFAfCyH44HjxXqk1CfpKjzq\nRIaBRmjCXS71oiD1Fh2oWdxOenyW7+UPzwQ826Z00o3dvyTX6lSRrFvv4uTQ\nnxWZ5zyrIehav71eR5O64yeGFJRuyK+hD/4AQX9MDRVj8OsUA769hnBHbBP5\ntGHRjlBXqVCuA/ukzuj9PsWnr6m/pxGb0CN+k5b4PpiTx2fSId+f1SN+CVTs\nP7pc\r\n=sWER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa/TUH7vABc5ifXfHVHXvuf5QQId05A8EWJkLqMEJiJgIgOBt97NiMqTjnn7Xd+gHtdp0diH3my6peP4UtMvVXYqE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.59174b9f.0_1621965733371_0.5827534033671802"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-button","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.c96cb2e0.0","@material/mwc-ripple":"0.22.0-canary.c96cb2e0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-94dSAc7RlbzhMItzOqnB2MLD7/9jrBoGKeDKXaybZZrfRfYzaiIhuPZ54mtrcjxE9izlIH6l6wPfs3BJJpjwuQ==","shasum":"818f495a7d7afe0cca591c74dacca9c10c1e1f5e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.c96cb2e0.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwWCRA9TVsSAnZWagAAxtcP/R3JsqSO9AIjy1UMCjh8\nol/oOmT5FKzukPfwBF0ePQnYuNr8S4j8GwgzgXsxYpIh03Jd2ppAyTq1TfuD\nX+eyNEZRpXUP5jxC+U6SImR+7tHj7oCqBCPYheVhzbiE9RsfDBOb9UOxmsVB\ncESO7EuONn76030ScCzl+A60vDO+Chc7OgwgiY9WCanLd/I5mzRGTHp72Kd+\nBTf0qgClpj5bIa1xgEpeaT0BGQONN5h7JCVTbSMboUPmfEZY5rSHr/C95hZ8\nNWojU8Ex0HmDdaTS3Xt16UTGlyEFGU8PQnHQpC2NunerKfbdHVdJlm9HaviT\ntoi5trzdbsD0wGHk/Vl4AnbauYRWaT6sU0Lu98ALPyGiMY9pqR/idgX2zf5r\n9Sb+tsvw40+7cs7/1Cxt/hlQwxJo6pCGhb3IFbHx1RX7HXZqo5BpGJMLc+3/\nuIaQTiWgEne2qEbIdpJu/IOI+q4gtiZhv0/SOYWheDNfMM+VLaAN9jX4rB/P\nWQuQpFXvc0qVKzMknpbNohm1u7NjY+PfH0p4K4d14iDpG4FabNPi1Edbmkhj\nZr8Cuc4+U5eiKIjURlQANhjPfi7TPEqFvGSq6vO9FFfUSIzy6jE+It5f0xIy\nrr2RZytcMDRgUmfEbGB/YJb70nLfB3Xg/a05YZI3VJLawgMqt7N34oz3JjQs\nNP5R\r\n=u1Nk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqZGh/GPxp4/yIj36hqY6UqX4R5S0EaNmgmiaX/sdkhAIgLPEq+HNB5SQ7sGWf8XWc6/W9H3lPMXdaNSYcWFeoG14="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.c96cb2e0.0_1621969941652_0.7366861227068926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b9b0e330.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b9b0e330.0","@material/mwc-ripple":"0.22.0-canary.b9b0e330.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-udr8w3vyGiAO+LhonSkC8y9kEJsUYjYkTqPKO+jrDRGZGanputd1727quXi/zD/yGvf20HtLs/KhAxOez6o6Kw==","shasum":"0b276ed786c53bfb76ee48bdebb5cd2626bc4134","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b9b0e330.0.tgz","fileCount":20,"unpackedSize":78637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWVqCRA9TVsSAnZWagAAkesP/2oC+qpIJPC6fVRESNzG\nxeAu5cQ+otMNO9gr4QZe0S7Q0ma263hUDvYyhZxKnSXOYA9SJ8xPD+v/C50o\nIaP+BNZENd6ryfev4UjJ5YJW6gqevr61DjPqtDx2WyAbyC+14E0b50h0TRvH\nCtxYF/jO9uUaPy7VRME//ByIwi1aDcUfFAEy5D6bpGc0SW5kAs3osW6x/G+d\naB3SCR3RFzQcCKRJJymyyaZNGrfa3CRpev2MKBc3tLHDyRcNvcSIpkQ1sulS\nOjCjNYNLi9T/Qlsw8gK/f7S2UxYpIxSeGN4wl9vmozshk7CE7SrXCFMlvDQk\ntodlU5yVO8BZa17ICFVEWOJCJDGde+6zkUCDXj1rptwp6+yZ9HWnJtxhZbn5\nnXiVEZDCibmlcEy4CV+DhAg6QhIIniVLK/c03V0+mjqFQKxF/EFxhjnI+FEw\ncJGLkQq4m8Nc7q0YQcf9FTdEyeArdcd1RRskYB6111peR0QaM5JYSxpbLf2o\nb/e/nptkLuIVAJXLUgk2SOrNQTxRe4/z/DcijOurRaIVxODopeYr5FBQJaiV\nInbKapzLP4e4zqJ+e+dHUppUDjrgtTiFnAyAy+wHGRpg9dsLZFffIlICJKfi\n7eosK9b9woFOYu5cPLKDR+SdK+wKZyNiqtjpMHVTUqpLMKn82JiDEzzxCDPW\nbFnB\r\n=qTLn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBjMhxNuMMUOvG0RX0ilhh8gfKwaNFSqvW/PMYELFYhgIhAO1EkX3okj7HVDdXhqQ8qVrcShn+s0zkRKWbzfnZu/Hr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b9b0e330.0_1621976425528_0.10732653884728838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-button","version":"0.22.0-canary.ea2a8063.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.ea2a8063.0","@material/mwc-ripple":"0.22.0-canary.ea2a8063.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4bb5eea2b.0","@material/elevation":"=12.0.0-canary.4bb5eea2b.0","@material/ripple":"=12.0.0-canary.4bb5eea2b.0","@material/shape":"=12.0.0-canary.4bb5eea2b.0","@material/theme":"=12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QiTXEgKgWgs1u06TuRL8bSfvPcM6XGSfRQEvB7gy91pJky7Y/eptt4qzdcyIoV6DpbFzvY0cjKqiSnw/vuYAOA==","shasum":"8d6de58bf9285be21b747f135be994fdb12ecd64","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.ea2a8063.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWaVCRA9TVsSAnZWagAA7D8QAIxuAMdE9WmTzlyJf7Xf\nKKtUJzaZBlum2QlZRY+knzrr2/yKmw7bXL+j0XAcOo6hdYYYvY8gqY1JOQzl\n4ywTp/fZ4KGrLoBiK13goCrc8cMYvECO0aoAJ6g1ExutZSYsGS1d34FdEJI3\nZfAxBKk1U9KsT/bIr5BS7qdC2HIeVk61HgH/K7HGECTsqpJ/lXL6aaNNyhEF\n2UzjlrsWghd2dxBtJoJthEgaQgHeVSYVv0GKzxwOz/j6LTfQSTZNFHdoAuz5\nA2D9Tya3uI3YJtsriedJd7VhbJkVKhlXW3RRSye9OVKojJRW70+WKj+OigdN\nQsCKxyIgNbhZPJuOvOE4MY5kO+JaRQloJnzmTFGvB16DnGzpoOT+SQkwXFe+\nza8fvqdSvtQyiL9ETCW3+KgdiBVyTVgwlx4EO9j+T/ceZFZ3i2ngG44y77SQ\niFmikFDi7+6FaO3dn9LURFPn5Z7vttWdLOyHvc8Qi//PFpzt6q03OJyGfQr3\nNdHyyvCMyzgrBJqB2QM8DpquwcIBxXPMBfilpLPq1psBgcfSRibnNPgFBGfm\nvFQ+GiHOHdmKJ7g6/XGGgX/yRAPSfe8g1UbUc9FV/CI2YcWhJzxSxLAUfy8k\nEr/uPCUjo3gKBnHp4tHmacPf4e0eJs1VZ1clZv//tzr8SUC/XGIB751Dk7I0\ntoUf\r\n=Obsq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWTprZpDNgJGqP+egLrs1tSrXYW1QYxQUaCWblGuG+kQIhAPT/pcfFjXlslr3sOn0a+xv5vjG7LtWaRTA4dWukJAwI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.ea2a8063.0_1621976724874_0.653513066620449"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-button","version":"0.22.0-canary.60cd9178.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.60cd9178.0","@material/mwc-ripple":"0.22.0-canary.60cd9178.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.fadab3372.0","@material/elevation":"=12.0.0-canary.fadab3372.0","@material/ripple":"=12.0.0-canary.fadab3372.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TBwDa62X/RCoZ1rh4JQHs0iTHh3PHHwJ+yPEnee4MQOBGshVThd/LdnYa/KKB255J4z8GweC4BQWb1Cxecprjw==","shasum":"9ca62a2132e7c1b1a9a749acbc462ddad7bcc34e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.60cd9178.0.tgz","fileCount":20,"unpackedSize":78701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYS7CRA9TVsSAnZWagAAIW0P/3wqEfUt5bmdYcgVMVTa\nNnFQ+tnTeJjMGR/hvb+1Xp90CXTFV0PAuS+oWFuwvAdPP66sFBo4XBVJimv5\nwmc+Mq8TZxz3cZJp4QThExYaPrQ9gCbtG1Ml+PMytPVgpI8RJZDhs/i0/Vw2\nBMq0XvxiOgR0rSs2RLBTXtEdOE+ObIzj7ilLDroTzs0ulo50tbw2gDSmDqVl\nur2FE53nvopoSUYgvc/QCZgD6L0Dzct2PdpOr2re3+bh7cPGFFuFeUNSkrph\nX6GSQMnV5xrSPb6Elmg/Kk5Wfvpe2rqU2t+heF+HF4lZyTeKQ15bJLBWMOi5\nNzuC6kW9flWYG5GyXujefhyLZs2YuzHsxRtdCJG1znsUXUIOMSbZSAhS5DYF\nyPuR83gvTYteieqUroACTAyfx+TdkpFgJ/FmWWltBD1tr2PdNDverDxiiUbo\nShUtn2qJHAu2uE/2VmsIrcEipTef5KxXGJx/MF4KmJ5hQTSCqfFZ1dTrZquz\nzJXf4MhPj6w904R00Fh6J1vFPCOKvdNwFLqmeXSjKO86VseS7GuM9OCkI9+s\nO3sotfcK0ceiGibs1Zjzwb3GCJE7nIg/wmKCJAt2V5blKfb2jIAEweb9Pa4I\n+i5UAvmrOP6w6drH8AH96q41bSdNY7Smb+BhyC639KN9MB953jOZGcgOEZig\nHPQo\r\n=sZ5y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWqmx6hbaOQ1VOkHtPl/NPDn3kQuTCq2iWI7m5CKckxAiBeV6kDNHY42HQjYNX7pStw4wQAfmDCvpRU332230bckw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.60cd9178.0_1621984443381_0.5817933118951564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-button","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.2e2c75f2.0","@material/mwc-ripple":"0.22.0-canary.2e2c75f2.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.fadab3372.0","@material/elevation":"=12.0.0-canary.fadab3372.0","@material/ripple":"=12.0.0-canary.fadab3372.0","@material/shape":"=12.0.0-canary.fadab3372.0","@material/theme":"=12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jt8voiAdO4qtYrV5aen/yDv5T0/g0TSXPxE4WjiG/SKDpCKefjoavA7KukFECO5GPkYxn2/WECxceDkLXKt5FQ==","shasum":"7657b8e0fc288ba4420743d44c88abbadebce38b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.2e2c75f2.0.tgz","fileCount":20,"unpackedSize":78701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZIeCRA9TVsSAnZWagAA6KYP/1g3iRX9ZFPaqdCSZKix\nUbmFyzcSBHI/Ddzf/wT4e7VUzQ5ZrtL8w2JNX42Ofe4XCRg//msMDvEEGqC5\nL5JESnq82jlwNSTmVdkU3RZxnRBN+nhC2PnteBUCY2gKGDPnk1aI7oBrlCwn\ninXQzaycAkaALkaKX+Nje4+2VxtBRYwW6TFQxk8fp8NRACKpREb5kn+Y4zHO\nJow/MjQxL/u994qPdrjWSqk+0Om2qvJ8l/tWALWTtQhVqHeQemaY9/DOzmFN\n+y/6Emol2Wz0+FxIMu4yceKaBv2NICOoD4hJVot44YyjvSABEacffhrSa9NF\nhMH4IFs4Ud6lw5GkFfTpoATtzODWpMkWqRT/YMRH8TvblWye6KY0itt1obx5\nKNKF9sckKKfY9clRZTMIGPSBBL3UmyM71FezIZmhllWU9XrdkI6lhvTZVZYn\nT4sSglAAsVbCdpNqfe6qNyfLqTqZ2MLrrrE3HqIc57orYDwojGX0JCEElqhe\nNRowWVgKSBZhzp3VAntkobbw196t27loY/y2FDTN2wQFkdWQkiCOqzYC7BuZ\nFfpmiaqwYYhJEvamq7obXagivNfY5piYk+HsTHi8OHAFuUPInwUARoq58PbB\n6Pa7Cgp3MnGZPoC1xRmNXc83iTJBG2EmcXBInNMDXyYYGp9P2Jlmzt5KDAIs\nKsek\r\n=axPG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEFLEzF12UNCwEucPseuGn6jmutYkJWtRK+3e8eIW0DAiBY5dk1QlqsPqfgbyKYgarnkkbs+EG5GOQbls2eCDNE6g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.2e2c75f2.0_1621987869926_0.9360717774394505"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b99c77d5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b99c77d5.0","@material/mwc-ripple":"0.22.0-canary.b99c77d5.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9sQYU9sm2EWrmA2plbseqUvhK8zhjFEftRkiHTb7Q2vHGQ4j0xAoocOXx6pzhyDWlmYuhB1ekwm5kC9U/7Ailw==","shasum":"f06f782e9433bcb948eca4a028654a1f2efb8f1c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b99c77d5.0.tgz","fileCount":20,"unpackedSize":78701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3RCRA9TVsSAnZWagAAmxUP/3YHk4VyEWO7hmdSONwO\nonVZ7DuqESI0+aKChrgHj5cIlG7ZmHuQNQ/c4XL/IkK5rlR5nTcbVKwM68SE\nbsh0qQHesZa9HIiP4QUPqnG7aTbQLNuRqF57EsejECd8DIBUPJwAJF2C/XZV\nwY3kEiPqQSbL77mlLEKXbTf4Ebcjsgw/l82UPxX+HS2ij3Xhx1I6nB6je/a3\nSqKWIhzS7A9kepASSUWoIO3W/SQSrHE1y+wE1PKrvx3t+twlF8TXhjbtya4l\nQwYjs0Upvu7MuxdzY/rgWYE2pIQj8bb+1PPd7yd0CW3qij39J6xWpwr8x/ED\nOXLeUwtYlPGzp9bN22WqXrIsYAuDYsrOpbwkN8pkbus8+vznGJx1e2J7gp5N\nvxnp2Lv/D6AvlSO4YJtQIqUyuyiM6sJOA2gjnrDiss6k5phM11gmRCwUJowx\nrPpyOe5AqpUPtY5YjtAT865KtaL1oDqSuqQeXu0tUkrYwBXyDHGiz462vpM0\nCXUVv7LplXJNXOOeTuVe0JZ23EAzg28+xBWcpSfTXdONvHG/3dmjMUR31QGd\nArnsFSG2rrR1AVDrDUJTNaIRjdzO/24A96GpGd56Hbj8TxFwiAuk3f1rVvtb\nVqv9KjnWlPFhaBIABdP5pOkv0arsWDlA0VxqHGmf3SpsNqDdWnQks91zwrsu\njyJL\r\n=G8//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOZ3HQ0gI1QhP/UVDEdm5jCPM8ilMBwyG5aHYu36qeSAIhAKVX1UwG5UU45wDNCHfbPrsor9defE8N8gQP1h0c9cKd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b99c77d5.0_1622056400562_0.5477905575495479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-button","version":"0.22.0-canary.0de82c12.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.0de82c12.0","@material/mwc-ripple":"0.22.0-canary.0de82c12.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SDeuz4p4e56y1pVbiFi7nELxcR7E+Jm3oCa3Kdk3wdAlo/ZmXMzlDTTb/aCgwklyGBQh4ph3dB0aCdk15URXaw==","shasum":"bc88e7118e8558287083ca2b12d4ffe472b7d02c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.0de82c12.0.tgz","fileCount":20,"unpackedSize":78701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4cCRA9TVsSAnZWagAA4CEP/0gSbUDAd8PZsFSnU4Z0\nZQpC7hH3ipjsqGEgTADp5camhXc1xBJcLfRTclFcEs+IZn+FdJpNkvtok7Ip\nZ/B/onfxs5+px9J+Vbs55037j7KnuljV36ahRVKFoGiEclSAEDQQaEtTUruV\nxLBWV3bM6Gq3+W3SvN+C9ijdCkDzeYej2a6u4bI7/kC+b49tkCr0t4S7LhFq\nAf1QtFJt2yqs6UD3aOH9Pq7C438hhwsqVBaUGFsu+3vmblVN7OE/2wcCEAJW\n76kMMSIImOoZzClA/NiG5+z8WGh/+MiqpJ3x3AhjJXxKTTffYYGfFoWVMFUb\nQK1hbJHL4O8Vup2sJaR03lyNYNIivLUpoeLUpUiQEtnVJ5N3gsWfQz983ymd\nYv4IMCoY8nUVGEv1wONsglczZj9qmh6LqGkXVHUAhoPD+Aq0WLVeIj9CEdg0\n+9BWAAlNMzdTrzPGD77rGYokO2cDXvesA/L4KD4QAVDN7pBlA4C8R+Kjta0j\n3YM0c+pWh/U4YiNiyCAIcN4wsfI7d1sNi4s9c+lZJHve8dE1NUuyLG0N42hs\niCEZQgXmFXsAJH8U3t/f7APsp4p0kunQGXRNFR8m0BuLNIMrB1GcrWDt3FDX\nd/olDoF3gxeWyb1V8lxoLrqEbCOgffzWGm+2wjVZOZANxNc1IRvLp1DFoqfD\nz9DG\r\n=B40h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu+TJ0VmT5c96YNqzyRq8wYfZV5wJxSxdCWVgaoCN7mgIhANEe4YyJA3/g36hXY+aZLZHpTnYV6AXf7RbBJrqKWIQV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.0de82c12.0_1622064667992_0.001643637123230235"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-button","version":"0.22.0-canary.227a4614.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.227a4614.0","@material/mwc-ripple":"0.22.0-canary.227a4614.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.ec31ae1ed.0","@material/elevation":"=12.0.0-canary.ec31ae1ed.0","@material/ripple":"=12.0.0-canary.ec31ae1ed.0","@material/shape":"=12.0.0-canary.ec31ae1ed.0","@material/theme":"=12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k3fippyNyTFhHT81K78QimyZNbOgjBRnSpSDH/11OvzdyYvLrEV7elGbnIdGWF2KgcnUGzUUCHKlzBd7afMSRA==","shasum":"e9fb1e8fc6ae4da0444e1f0141f6fb335cd5366a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.227a4614.0.tgz","fileCount":20,"unpackedSize":78701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LBCRA9TVsSAnZWagAA2HYP/2L85Ri7lqC2nZCD6ZBm\nOXjfaZhZFXdCNxfDNhJJbEnI4/e/MgYBJfc9R0RNMVNoYvA3/dOpghzENC4q\nNCscYjvv57TE7ouIQ9hq1TJJDOPMfTJX4DmPGNkrOQ06ZGaDv4IzO7GzM97M\nMvIuZtyBqhkoxYq8HP8RyNcFKORGDsObwvF0l+iqfMveMD4mfgOc5uUrcmEt\npi9WyoJ3vH5cHBRhiUpqUIJ2mjWcI76Bzy8q5N0yNKUcOP3VHIXaWh3+zw0L\nZ+V5VJhWwwlYbb0YwPSmmX4gGDe/RZffH0bBeZe4isIHNr8a2ez/WdJX+lNR\n1rM3C1ghgr6a523DRJaSvGqfmDU5dCnjL9spcd9z+zBihtn02a1Qh0kA2VCL\nmomPaU51DZGqQD2XaiLl2tV5y1tco6d4w7ETlvJwOKRF8OqQrwPHA4gMWmCj\ns2rdXRgEYApCKKOt3vslySl4o3d69PJ3WjjYrE0gNYVObUQ+Pmw9p9uDcbd9\nZL0qApZ0ZBtjbAdSTqFxA9qnqGGnli3oHLWefUGe21kljFUPrYXPrcuepPEm\nQ5YIJd5EoiK8gmSlSJbrzsriduiwTUwhQScIN0SB80FPOJdoFESo0SKcm9tc\nwxprpAsG4VgVKN7rCqLEhQri3CpAkSPUDsNLTuBDCDLIQNnF2pvSXhGJAFI6\nxpZ5\r\n=AyEh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE9C2btHWmA46Y6nqNB8AaUxN67y9OXHpVHA7Rq6L/9gIgGjfDoUFoPLuHS4ZC04hhK9XplDIAcdDj01S7ZBataEo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.227a4614.0_1622131392900_0.2163645532237819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b3d21d31.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b3d21d31.0","@material/mwc-ripple":"0.22.0-canary.b3d21d31.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.8530d3514.0","@material/elevation":"=12.0.0-canary.8530d3514.0","@material/ripple":"=12.0.0-canary.8530d3514.0","@material/shape":"=12.0.0-canary.8530d3514.0","@material/theme":"=12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6kxO1mjqaG4QyGLgV7VGG9q+JFeB3DudeYVHB0KlVcvVq/KnMTb1inA+EcpyChl0401B7HnbQYQ4yakakYS9OQ==","shasum":"5c492009687d64af2062824c3f81a88262537efd","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b3d21d31.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+i7CRA9TVsSAnZWagAAR8oP/ikIIPVzX9Ib3htWj7it\nahT2G8kTjKwOYHO8DzJy29I9s1IdTdyqkzxslq5kRWCuDuFewl+5+516I/YT\nwQ/7Kmhtq+pt0cNH7kXctgxza9JQClF3z7ZMk6ghgkgFUQKVUz4jI8YdMPXb\ncDaFVpxuCtg2caBLeps9QvVXt1ojXQAEhmebmqB2A+hK+TJ+x/DcbfJ/f1aP\nKp/RwfzzvCwqNyMHDoToUoZAbMjpQNs3UyBm5Y6FwvXEIZdDXTAsCCvvlobb\n1VJZtC+IqdJuGc/pWEoqd16p9FDaXL4VrKiXIHveN3DG4EzIPw6WYiDXHojz\nKVBXBDS/uLb4bwPke2pY3vf4vkU0CsxDn5I6rsbCG+vST2PBCOL/6GahSGRh\n99rdsb2fGq96AlaCT32RySEv5mLsXxCUImpSAANGz0EMMt++qKOMjYrcS5C8\nNDYxS7X9Lc0J72aLPaxsKVMgQWh4+MewRa48H31ec50UqHC2kH6D/xp+oAXN\nw5ABNaK07HCtiP9cIjpBHbhAJ33m7advg31AcqdRqtJ96ahzEoMDPoK+4pq2\n4fj7vXsF+o5mZnO79sLw3RCqcAN139ryY/sg2447ImideMwtSATBtze19eYJ\nLvuS7RDYwy6nzaZtcL6o9itc5Poqe1v/Vfn2MpLCg5jzhoijeS1nfMHL8f7o\nB2BZ\r\n=fzVa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMyUsw6UrF8bKKEKr9B18M7nHsHbeCIMdWZF/tBxqYxAIgYpCrLFex/Pfnck18jPqinkrrmqLrdffHF22zTmG7Uxo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b3d21d31.0_1622141115154_0.4989438188751283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-button","version":"0.22.0-canary.288c33ec.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.288c33ec.0","@material/mwc-ripple":"0.22.0-canary.288c33ec.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.00b5899dc.0","@material/elevation":"=12.0.0-canary.00b5899dc.0","@material/ripple":"=12.0.0-canary.00b5899dc.0","@material/shape":"=12.0.0-canary.00b5899dc.0","@material/theme":"=12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QP4VDZboyfNSAr3KPBicm1e/6hBiiQ5Sm4VTlflEbzUuAwoL80ZPCV0KwGSwxEqGu2uJLUi0L66lxhODH7o3pQ==","shasum":"4e8147401b53fb3b6f4d3deb7db852cf4bfee6b1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.288c33ec.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt9zxCRA9TVsSAnZWagAA7N8P/A5g8iRU8Gcpqt1kfNdd\nNDRejkXi5H4gDXzSMvlF/yob81aPs1vTI9vFGLjxXnA3eXwH5Qs0cfvWVxDL\nmmjFc3CnRztEOH53niRKdEzsXFTAeq9wPdjglVMWUynV+M9/af2F71Tmo+5L\nh5IjPg2PDQ0hatmS5tL4PlIYc2IbDxPW3/wJ1wAXul/V+0wLFlA8vIgd5vmU\nbbpMh9QGo+VbR53AoUcHJCNgGhHoatgsQe2V5h8oP6ato+JQYsINzIoTeE0/\nJ9lhQGfm+a3k+2rFy6TffJWpBozp+Z615MtKiw06/q0c9V8OiruhbDjxHJts\nBxqGFnHdbB0HAUZznIR/bNFNEfNBivBnqfccF80H8sTX3nJ5ilH8NJm/VHQZ\n0Z5QUD7YPEyM6oXLdJ87oqWIjHtTEA+IP8hDVXAcjj35Uoub5MKNXHdYRFF3\nerfxU104ccoYBs1Z98E1xE7Fmg89R/kKaIooh1oYt4QSPEPHyKbHOJ4f40+Z\nWHDJR1dtpXVJkZ3BPi5748bnlpCn5BlA7IXRbSXncokYRDxxXgPA0nwg4Xw7\n2MItXeZ+Hh6LmNRnrWdYkmTbQYgX/giRc+3b3bVhw93PmvLz0sNzIftpRkZG\nnnkbczRUECprqKNxmdevDbcvqMdJFr0CV8D/qXDs07bcZdWQ1mjehYCvoquy\nky+v\r\n=5qzn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH31qNwyHVGr05C+nVdwD+tK875mHvV2+lB2xdH+aregIhAIBNdWhKNYGC9zv98p5PDzJLqJpCJZniPjxWCnP6/sVc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.288c33ec.0_1622662385100_0.23597567584026868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-button","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.7eb7ccb0.0","@material/mwc-ripple":"0.22.0-canary.7eb7ccb0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RcDZI2AXvwLXAI2VoLjC6cvzThCkSohz7Jc14LmAldnvgXcYYFWVB7OoWKF3IObK3ejzY2d/RIf4LLIIBZNbmg==","shasum":"3ead1b3244022b8e8f69a4f5cf155b8afe824776","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOWCRA9TVsSAnZWagAAeu0P/1WVJ/MA752BOfCsxbwO\n3rFGfDcwZ8VfRx1hEaAhnAuH/SexkBTKSsZx7EwKaAf5+nXM3FVnXl8h2elZ\nRnEto6pYRc9LykQ3yVUgeOPVJ8NdVVblRHzVA+5vhfGJGV4PQ6TX77mAXQKn\nUSgFxlEGWEiYCkgvs6afW6Tr5jfa9OAfSiNnYp8HrQxY4tOHb+fk/jng7RgI\nWMCo5MpUrct/20c3qJBADeklbNLLKuqTMHhFMlW6hEN81YAovgk2QSjJZJ3x\nvJcrDEQE/BSAGVHMTYTcQNbxzll+7NrtM2DaIxXd1GVf2kpzP+TD+AHbFmuF\nWXa+unnlZX7Lu2ofY6g8qUGiykUGufGbnsnG+LT+HXMXbq6Tr3hkKp2hu6H9\nHhaUeLN8qaN8CL4moihAgHMUZWUSGGOdmkeQ1cL1eW8dZo/jyRy/d5jwmNqH\nBn0yzH+3ls6xOSSRx124xBw840gra5NzcCdFFqH5GrS+epmKnMmRIP39w+rf\nB5yi2dn7sMBjGGU9Cb19WKtCSoJNfRbRmKMAtUxuAIf4iuTVkNS0bnnTBHAG\npLrPT7erGIWD35gNWPviQDyEMb2pmLpQiPJGgb/DnBlCcTFTve5VNlh8dQue\n0Nj1vFVNEumUR5HTc4UkwPoBQVQ0BLJ/6YrffzQUoZtLQOPXr5yJb7wzEPoT\nUyqL\r\n=vmCf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuF2XpWAlanPG0nVfVSFmQRU0XmUbDavSZnCqDBoDNGgIhAMDXMGyNzHwZPByVdfD/3/2WuYilDsAqkL+GuJmuLjqy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.7eb7ccb0.0_1622750102033_0.439198695237075"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-button","version":"0.22.0-canary.7fcc0726.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.7fcc0726.0","@material/mwc-ripple":"0.22.0-canary.7fcc0726.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dmADZGB/uDmmragph4/WCPLtx5NHVWMevXQxSrp5kkzmcmysP7HuakMmXaLZ1nRq1xX/FdcdR/A/cmS5SnMEwA==","shasum":"8dbd0e263c54fcc0ffeff3aa16ba9179f637ace7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.7fcc0726.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2oCRA9TVsSAnZWagAApsEQAIJxx3VTAsfErZNFwSiS\n0v3N9Kw+HOUxD9Bhr0lGssZHZOFygdD81fWLPEBEmgcoxsii57BPuVbc9O9+\nhtlsV6X8K1k04cqy+hzvk6fdiUf0gDjbB0cwXlFdQm049VN0tRrnlfqmKO99\nX3z/gUhO04HJvllzBnVIRjzYOCj691Tm97ztczdc77rbe1eehXlbgmUr+LWM\nFJq9Fb00EBZy7i8Et+f1FfzDURf3zKd2kO4N88U3slgyK3NDktv1yYuCVF/O\nOW3yT7G0J1FOXUYS0pmQ/8cu4omsyGWpoZpiU9uAnhscyUJvf4dKNjWGaOcF\n+ZwoNd7j3APTaQlQxBu4UoaDXOy2ySQnMY+KKRihstTBmLcX8/Y6F/hPIdhw\nyK/azGpE0qKFAGQNUyL6dRxDOZGQy3Ndd5fzvaKhX76xGBZTmiq3tMlFN1IU\nu4UkvrKjW4YjlJRaMHCYGrmYxhYlRi/Zb5Uhts0Lo+hW810af2QDH543cXKQ\nM+OsqIbeMWAsOefu255GYixcDWkyiCRdR2k61Rm/d8yxKq6dNEvefjxDF0BU\n0J3YaYV/tCH4+vRSl2r7YIJrJlzY9atEvekqDaLi1SqmgqNa7QFKSGu2XxUX\ncaH1imaTHw4YbyPShADOj/BvZ5uGUYpOiozOUNM713SvWEDW5bSgu1sJmI34\n5Dsm\r\n=+u8w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYziBzFSFuEA9IW//2ivwoV0ppGPPZGdL+3hThWsAJ7wIhAPHbbk1qTWG1osPIoT3KRG5KgD/aFoHPM1fRgJLPLxoL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.7fcc0726.0_1623113128049_0.3378534790621077"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-button","version":"0.22.0-canary.220a4e5e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.220a4e5e.0","@material/mwc-ripple":"0.22.0-canary.220a4e5e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VHwk/boob5s1YwOi2Q6CITyxr0TNdOeqUGle0uSpgDarMH/G/gYdUOTaaCm/WaFkJN37PIdcQjgLaMa5QyfuUA==","shasum":"c3ef15270617ce4f61e0ab2ba5250c848473a1df","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.220a4e5e.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63QCRA9TVsSAnZWagAAEMIP/3H6V2GoqtQGCJipjxAz\ntJ+xE33vnzyXHgK6dpgMNXlAhDMbNpPbGMCZ2J/fFk5y5/2+WCITfI8wxhPO\nWFPpxhhXEsC+kWjVPt+skDQdQ6wG42txS+Cs729nfXhnPoOngtmEclCRKg1M\ndgWmtBiSDSEi7Y33qlQ5FSyExTqoEsUkJtrtv2ci6oN/yY+Ty+uK+JR5Uq51\nm6tis4i2AIAgoIvyh1TsgT1bqNiI9EToM+9/KiK92Ub7VTKwFLADvV8f2fdW\nUfb+WwUr5ifcWHy/90sIZeHIMW3OWcrQypKub9Esi86457xv39ZdGke+eHU8\nF43X7MnrJitLB7CxggEQeB1IQkb5BxSRFf8pU0jzFtdJ5CN91JNNZqD7/oGu\n9RbFyqDLbY4cj1axkOvY+xw7TJaVFIc263XpMTlqnNqqp8XX9fUwoCOut75B\nljUahhcwq7oAo5digxTc6nDylW8y49/zhn+RIGmV1bK30eRuoIPyXaCQGdat\nogFReR3hKzv5sgCZLsBGQSIVyqQXa6E2oyo7DiiMj7rASqKRkxRhnXqBXBxj\nTjtonfJKfYk6FR6LW2AS81zAbQdAbxuvvQHffr+D+Zhz9By7irCj+TuaUojc\n5xx+gDnPjhnmDF0QA/YMDlegMQ+tacygReuFcch51QipAlOAi4KaYNQb6Q8B\nhdc6\r\n=aBJl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvXhRhBDRX7bw3F782eitqm7Bvm86IFoDAFwG+0cRJbAiANjOuCeROcm6Xp76OBia7gNaitnw0U/MTipd/oTbNvvA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.220a4e5e.0_1623174608308_0.5141322173354599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-button","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.6b2d6ab0.0","@material/mwc-ripple":"0.22.0-canary.6b2d6ab0.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.474de7878.0","@material/elevation":"=12.0.0-canary.474de7878.0","@material/ripple":"=12.0.0-canary.474de7878.0","@material/shape":"=12.0.0-canary.474de7878.0","@material/theme":"=12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lhKDWQRc/WrhcfTdPoY5TPJxqZXCERA0hvrE9ZuzUDy1c9VBVl8ejd4nCZEgi5CtQh65shY4DLqTsf3V4QAgkA==","shasum":"f1fd5bdd1168776dfa5d8ed8e1fda29ba82f7553","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7i4CRA9TVsSAnZWagAAW50P/jXzrfTplNHwWWuuH701\nO610CfTcUgZ7kqK0WX2mT3UC8vfs1OhYDtsWMHAgDYbcjBBUUtiToGkcwGOH\ntAG7NMLFyk1cPiYSMsQAAcn4Hi0F6lFiEnafCAiXUDYU8pe/0nIBXyWWRUsB\nVN9k6rAS8xmKkVR/Ea6uYReTSthpavHvYKzdGil1cm78rA+vXcFgTXd9q/FH\nkpruEBuj7LvfkVtTeKHJVq4mvljAIDtdwHxW0u9KDqzZaQdxEbg68KOPYePF\n3DlgM/ASUOC2dshME/kQilVllAlDpHU1D8JGVyh2Ihtz/kC07L1lLd4hnlJ7\nCUepC028bStNglUxomjZKWc0VLSCkN66M8m4ZMf2XsjQJGb7KlQAZ3Yfk4W2\n6KWVYRRvJJQ5vXzgFXi30Lg+wsMf6AA75FeLFG84zZneWoWi8RACAGHPXN+h\n6aUEbeOtkCgzAKyuViqZCoPnyXNNOb9jRLMMmVGxTfimxg0Zvxu9E8JeU5h0\nTe32LCicbr8mrSoXlP6RR3e+MHDDJTLoCEb4ju5HMO2iDxB2PuTWtekt2c0n\nYicdLOynsBWdlIIBO/tBevLrE6I0zQgtmBW58QTGYyYSKWvgUcDG/yOKHY4/\naA6RJuV0cbm6z1ldluSK54QMtCFxTsu0tW6dsL9um2Ae+iLWhAdXg1PvxSte\n8pjp\r\n=CVVT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtN+te7u9Sj9VW43lUJXOMpwEXrpL+v9Nl2WEK8UjkPAiBd+4GDUI1+Kr7+3fwt4LtcUF/ARcULMhO8N+7A5emzDA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.6b2d6ab0.0_1623177399916_0.5687240579641175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-button","version":"0.22.0-canary.2b20825e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.2b20825e.0","@material/mwc-ripple":"0.22.0-canary.2b20825e.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MwLwpfBvm2w/0eS3KysG0Cu++z3kL67CK3Im9+d3id2T8XB2Bq/LsIonQrAmO1mTdcyFovmYNwpVMh90/KMfiA==","shasum":"3163f8e01dc3ffb28b925fa404884eac116a480f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.2b20825e.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/ZvCRA9TVsSAnZWagAAt98QAJzntZozr6g/bmppK2n0\nLmSi1jq8eziH2AZwfXYjbklndJZ6pgld7B5AFxaeXmphlmSh3SW9JK7Q5ve/\niQh8GB+lZysLr+yKKym7mURannkPPYjv5VpYJs4aEFfUEKCClirL9ZV8+GP6\nS1PdOmKcjEfzJPhb/BVE5JmxXtNlnU4/RK3P2K+ypksMjq8Xew0Is8MshGSX\n7ycqLT3djYjKmU62jZMf6BYpqXA4LrcARRoPpdnRa/ef+NH2gKC6+GbjHul0\nQrB98mfQZKe4YX9zoJUIzEHZ1MAd536tBwo6JLrV4BntM8ZQnjpY0UuEU8IM\nzSRBUtQoUKLifo6pnQ+WqYvRX3qV28RKrwlIJCsTdquU6sD8FTjFx2Miar3p\ncn5fFOCAZwiaVOC4QhrAxa3Do02Eo0irsE9CYrEuHQC3tx+bdCERqVPUlgQT\n2StbA/otWrTmX1IQFuEGCPMCy/gFWKPetb/JWcB/nFzMIwq0tPVQG3BmOlzD\nBu1x8S8178VHJ88grVss+gYJ4jRUwO++/X8PVmWMs1sSx7XhgMaCTuYhhHDD\nihVw66iwsZm7I1Ui9F4oEJFSHRFxN9OFPKkTPQTrBWZhplwmOc8YtUvNP3Pg\nZC3lDLkQNHTmJi3JrT1pGWTyVzog7BcTFhte4uM2OcL0Kb+g2BHXeppKPLNJ\nDkmb\r\n=w4KJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnfYWAYuwTPJQMMUCDETE5XvcHzPl1XplYRpbH0P3anQIhAPbEo+ekRvxLrNCIltknVL4S0Vg/FY5eEHogsCzlJb95"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.2b20825e.0_1623455343382_0.9882079980625478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-button","version":"0.22.0-canary.e1511867.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.e1511867.0","@material/mwc-ripple":"0.22.0-canary.e1511867.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pefyqj7yp9YSyNCxuOj8+7qy4/s9uCzF0Kvzze9D/GQ+4n45TTmFVtCjahChCVItWyEKh5TGVcjc1m7ZQ89DzA==","shasum":"e9e3f2f64ecf11909d816bcd6b8bcf323c766df6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.e1511867.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAZvCRA9TVsSAnZWagAAdbIP/Rg+R+ePLufKB8RBhR7N\nzeLlC1k/EMr9kPCux63HMwq8KXqXEnChdidH7iEZTMF5GZ4t94kssbTCizL2\n9VafoNiJMh7L46DnoVZ2ttMRL/BhSSgE0xbryWRzYWtI6lItGn0j56haWFJB\naCgHHRzcHNqzETnEvdJ2glRv5ZUneiCbb8Vi/bjAEKBeE/+45yOsd2mVTi51\njLrDBdqzEaZQ9Kmg4KvGzJ7lC6P+2O43xqmQRXnopWp+zQrwJFtEb/pZUO3P\nguPr8NRZlvuvXuulhGFVtQpThHpSaaJtP62GlHxrIe0GbdVW7yZM3ZPn7Vi9\nCH4oFp80un4wdEWOAqlRqe+Nvi39Yim2AJNPItjymXVlyRgUJ/haSsnhnjSE\nusHdrIimrdBCcwqDgPNstbe32P/cvbx7l0s90+X9QM6YYyx13UHMBD/holS5\nmWWXqt8pucbk7V/m6izTDzVlq79gu6SFsMZCvV2UGmMhZIi4J9t+ktsCGbb6\nFaDyRMkVxGK2jAhOChQruVblVPxQi4zqnPRANG0q/a99+3YEg8omw+xRPKHe\nl/3golY7HmmO4rH2NeneHJT5d6+xxUQRyO20wrld/ODuKyR4VC68301KSzln\nEnjT3fzVVTc/OzeXvuZJVdXpZnbcz4ACYe9Dw1UVMi13iWj/i5f83NJbQJL6\nn9M7\r\n=eXiM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOEPOGtYTaoYuqHADBUZVXYLL+qW0/FjdrJCf+mmCyLwIhAJP90/CEA7fdjlXSvJmJKuV6yaULaAtxn4rxP8IQmXwk"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.e1511867.0_1623459438835_0.10299501778452114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-button","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.ef4a0c0d.0","@material/mwc-ripple":"0.22.0-canary.ef4a0c0d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.8415ae585.0","@material/elevation":"=12.0.0-canary.8415ae585.0","@material/ripple":"=12.0.0-canary.8415ae585.0","@material/shape":"=12.0.0-canary.8415ae585.0","@material/theme":"=12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UjkTPwefkjKQoSrAze9m01ewwUEKzIp2LRorQCno1ZmMsOhbp+qmcoFV7MK6L9Crp5NG3g8IT5F8B2ApXG3S3w==","shasum":"c92580f1e8309afdb6b70f342eab011e96e66d4a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTYCRA9TVsSAnZWagAA6ZwP/0QoRfacNribn36wQYuP\nCT0Xt6EzClZ5/6/LxVsPs2d+TjtYWHR0zEZhxJOwBYFUg4i91qnYwATCIEpI\nSyD/5hkfnN3iMy+VGQ9DZv8pGOUXTx8/P8hsr2YBmdraocWpwISerNVTY0Br\n5gzYN1coE+hI1jg9VzTlF0I2xk6CVHlggyZKomQipjakBF9mDMfhipmhNv3/\nq/NgfFG+kSCZkzZJz/PCvIv5fwJV83yKlA6DGIoEFinB65U4qdY3Ol1MMEDF\nNBryIvgXSvtSgpOEe+OktAoA/HCJhcfy7FsHFZRAcsUvaN+V/Ou0ODvUwYKK\nkc4MpdkaGb7WLksC6iVgzFekzf/Ehwp/CWnMBApGMENakyykXnCjMmjmxGvU\nl3cNt+yKe5xnpmFnIP+qf2TCgq5NmpQbVUXMcP4VivaCADumTP9xzXM1vJR1\n7t072QAinTuKW/A3ORoRV+Ewf+qinUZhR3EKUU3mzNDOH/JNj/yYNWouymRZ\nzIgFlX4gKWKpmTY77WgmF5MXUJK7aaCAGA00PGqAD1ZTsRlonCaf4/wfyx6+\ncNGPiYhdabX+uAeOgrrWE6ReZKXYgSgn9VNouriBR5zTrWe2/FThpxpw8Jxn\nS47dCQApoNJ6idmxahTDk8dIuxfbNnVe0zGICPxzlBWIImHg40WH8wTqF146\n7ASJ\r\n=SoPv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxohRuu91Su+9Lsizj/XMo8/QaO6CYohqrb/gPrcq94wIgY5YNBAb0jjGRirVrrs50nMLIfySU4ga7FtTPOg0oTVQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.ef4a0c0d.0_1623786712094_0.39740354155582436"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-button","version":"0.22.0-canary.573d8913.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.573d8913.0","@material/mwc-ripple":"0.22.0-canary.573d8913.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.f705e8048.0","@material/elevation":"=12.0.0-canary.f705e8048.0","@material/ripple":"=12.0.0-canary.f705e8048.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8jbXXaPB+Tx7w0ry6+a48JGKM8ZL7xXGk6/X6U/3SOnGnZi5GpZLgJ9Rw9i+deK4AB1wjapFYGY5KNo9NATGFQ==","shasum":"8e93973c429186d05da8fca4e6bb52aa1eb23339","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.573d8913.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSuyCRA9TVsSAnZWagAA7/IP/j6HTulqwnSOJGsh9p9j\nC6kftmuHfXepTxvFokqceZf1tntw73Wo+wevtLvE+qJNlRBoznpvCkKsDbcs\nnpJzS4DEgAQXtvGz4WvLSNVgLQQOYwMjINw43VF2JsmbWic7pIoPngp79qAY\nY+eFEYdJlNqB5Fmvr4Ab9fj9jtu+n2xxvFrXbFl9AWDtwRMDljt9z1gnyTFf\nyC+eGRKvt5bYG4NxfsTrYCDEQNBZ6F8FYT2baBmQ9KL7V3CpZWkEAo0L5pQW\nqNx4mUR51vTMp68JXvMmUIaGz0cV5ai12LRE3beIJqKXvA6ssqlkc9jc6JOC\n9inKBfA6wkwhHPt0/UEnKshcP35J5ACo+UJeLSlznFUlFFjFO5RvdKckRplD\nkx4Dg1HieqPsNXy/zOCH39IsXtc6ZuoXm9jVpECClGY4D8ofIKQMYFwX86cr\nJj0LnjJbrWq39MD9U/arhkqjIu4ODi+e/mKNG8pLRF2HEKzEPJYRwAfqEWzO\n7K7DjTN5L4qrVzf0OCUERSV3nL6M44snmkapd8CV3g/fYyi67mKqJnKpkKvF\ngzarEnEPoCUEZ35paRmKo/jL4nX9Vtjcw8C/ZUWfs9zJkZmUhK9XUL/kFt6l\nJcyynuW8xWXurItiJEaRuRRUWHomiDaXLfqzyed2kh9JctarnLPTJhUegFiH\nsZU4\r\n=9zzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzA75lu37KHo83kvk3oyomx6+Pask4DZoyiiUeBm19wAiA77JUHpOqrjiLLLDexpwKMah2uGjE7yjoGbA68XZLyPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.573d8913.0_1624058801735_0.39163504522104664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-button","version":"0.22.0-canary.21dba001.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.21dba001.0","@material/mwc-ripple":"0.22.0-canary.21dba001.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.f705e8048.0","@material/elevation":"=12.0.0-canary.f705e8048.0","@material/ripple":"=12.0.0-canary.f705e8048.0","@material/shape":"=12.0.0-canary.f705e8048.0","@material/theme":"=12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8o6my6+nuffSGM3+SFS3XsC4APSDaTAO433i5wvILS9rhMejZfsbImq9ewxgO++uS1ngM5BPzhljxnweLAMlrQ==","shasum":"4c280d17c1be0b0eacf88bd5fe1b2e74bdb0d9ec","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.21dba001.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdVCRA9TVsSAnZWagAAl4oP/RCBRLb4pULLLyxN8ntA\nQ742yqPSgzaoKpNpvIVvIuA0Y5au1c9PeGeYVwX28xgn0qH+BejitV80ZaF6\n+Sv4ntvo8nHQldZ8QvEVCy4QC+dyJh3/hsU3wljqrhSAi/+w/rccfA9NzOoM\n9V/kLq6+EiKpbDdVqOVdkR23gu35V69s60NwWddsVPkHQgNzdtWJqBIrtMsu\nLA0e6eXfMIFBQCcV4tOPzapy5rWIBUqhFNqcNKc+Mzf+xxEgMRgY1yAEE8Nb\nOQ+HJSdoRcK9prKmsktXP6GcXYy75r2syKjk7CIoZuGPxvNPBX4TuFf3Yjal\nYrmgIYJn6PfE4wmJ76IPogutVhy4Zfw3VVeiz+BlWlIj1KqJxZQlLP3S2ldL\nmkIXKbwSQG0dNCk2S9UDmCOVeSDkwhroIMbFLXvE3Emj42ENq2BAdjclWRGx\nTDnuGsV2mfgu03M7OEK8D451xjLBxfna4J3sz+R7LmHTYj4SocIT/iRXtwlr\nHkCAi4n8ry2e4XhVRHUkZzDXoVTQlyvKlVsiGAAtQdOwWuE+Hpmih3JnaP1M\n+t3Vh0ukJ1kIg+mQSGO45OVuU8tL/sjBpv2nq5jr64LQVbkTJ9RYOmoT79lk\n9K6hQGb3Ruat1juP41esNT1ErKGeDy0qZihxfS6p6CkJ0hwSAla4j9dr0vSq\n41zk\r\n=46lD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjscu8SQe5iRJN6QWFbGRRkCCk16G0iV10jnZw3dQGtgIhAPfwE06d5JsWfguq/dvqK5tImdUm4q6e65dPjBj+Dhmx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.21dba001.0_1624311637023_0.423220979271157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.6f5bfd0f.0","@material/mwc-ripple":"0.22.0-canary.6f5bfd0f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-d9Jw+EFGGuttiJquEEq3UGWhV5q1nuJ0EI49J8wmS8e4CrJluobf6g25l8d3dTGlp8UeLdqklu5HDw8yH8WQtA==","shasum":"21059259a971ea383f51398bcc320e47b4acbb35","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2FCRA9TVsSAnZWagAAd5kQAJbaZEMZdI96sXLMpF/x\nh+8jEt7xbnmBg7RsIftHZV2e5H9uTmezXjC3NaYRvmBYpE/2lN/nPpqT23+k\nVF3tg8FEp8eg7vanAHYxoLAFL9tagtPNWh1Iz0smaqqVspggxk7v8sWvXuXR\nZdBnemXo9SNacNJmJR06MS0FUDX3YUBKvz4uBpC5pRdk9X1MoLjhXiWBpbmh\noGv0LzOEtHhsFFJsDVHMbfM7lNSvO+ahQqrgexqAhCZLeLqdzjrX5Ig1PsAr\nN3TU2rOK19caaxyEI/UJcQ1+PfP1RXMoubGJ3x/RuxkoWTytBkNIofUyNDXL\nSuIJrXrWVKXdDm3j74rG+fea4w/vL0P9hGqxLxeNri+uW8u0CZl6XJrEP3kP\nf3w9IxmC5+hh/qKq6QbKGsOcl0y1BcfBGCBIvqglYKX3NozOnQy7f/qKdBeo\nriklZt9UZHyPaHJN8VaroLILwf8ZHdphZS1WPPtGF36acGOIBDDEzV9Dlgx/\n51hk9LAUJdi74C/hz7S49AnQotKKLnD2VHK4I5wFnFBW8VIWafdinXSUCpxC\nw1UqLjlZauyJpSFGYtzBdbiinivTNTIbXvd9BoKqS7LcrM0bVefE9Ok4zEzF\naof83S6QdbYEPM8y9t7cX9YlVpF/5zoLE0jYWOsUyvH5E2xAfaoFyBZ7vycY\n1BkH\r\n=qKDx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh7Uk/Dq59zL8KpXtWBLCav6/wUvd38nif94bxSXWJaQIgbL/8rS5dyGVawvceWkILei83YnQx79dGC8xR6+CCZOs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.6f5bfd0f.0_1624575365228_0.2352275135504771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-button","version":"0.22.0-canary.fd8360b4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.fd8360b4.0","@material/mwc-ripple":"0.22.0-canary.fd8360b4.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AnsNDi38M35nLxjO/OyRBVnzWg6lj13S4dzONAheP6Eh1V/0QyLAsxbOsGThLMJwz0vpnUa2f4QmM41MDrXGug==","shasum":"e7eb295b84bb0c12fa59fcebdb706ad340f05257","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.fd8360b4.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inTCRA9TVsSAnZWagAAkx4P/0zPScPsBtOHKAf8Y0qy\nC8xSUio6PJ8PH6nLskrgIIIJX7ST+sfGchxHEd8s2AZcQFDClcu/AsYyFUkZ\nr3cmH42a+fZNpcHNBs3t7U5Tv6SUEb7M8fajrHaATK3FGYZ69gc2wz/pPWcv\nLWUBt2U4lwNrJXzAM+RR6eaBpzW5Fc6hB5TVNUFo3U1I11QGfeVfdmfOLwXn\nPcNOn/9Lse6tAxY4iC9z0KzyXWnY87RyQidNAxHPMOcY5RNS1Vz1vHuyb5CD\nVPqy5SKj1J9SjqXaEUewknxvgO/snXX9MbNCd+cOB9ihros6SOFo2SpcDvgj\nk2lDXTZCEzMZdYapU9re4V8+r39lvkAd5lyhITKdk3omczMlEDsIPBBqpGdH\nZGx3dQUYkaV7FXGF7KGWr8GjVZKlv5zVVv2+ysPP3/n1kbrxma0CvvPtK55F\nW/lYgG42ufsHCBpa7v55km2ozc+SpgiRG82tX5INZe1wk9G56v6BX1nsBgYa\nIBmD9tmUNPPGYnd3zAbfNwPvdRwA438Exdypzt67A5CtgQFj1UWn5Sr1PTfJ\nphIyudXKkAb/0jMkFkkiZW/ATyCjyAfWhtrxlRubWbQimhheIF2kZAFcisF0\nio3Ez64QSxy4cnYaeZBVwngWfM3RoHd/L9YqGaPGxiJdZxlHvNWKYFTuRLlT\naQtR\r\n=X5Rz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgmJkiXjL3uWoIjdAgCsoa9Abov7VQB+enqmHh8CDRlAiBujzcZJQAZZcCrxVf8C0j7+L9Z17kpEaCe/RZhbVsOJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.fd8360b4.0_1624648146542_0.1442354479927228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.6f74432f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.6f74432f.0","@material/mwc-ripple":"0.22.0-canary.6f74432f.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CXKJWegWAQzCy0nbJ+zvLiaeKa/rgjDZt1lqly914Di+vq9fNypA6ava3qPUpNw9wpBniWR36g1Mj3nEIpiB9w==","shasum":"8e86d22c9bd4948a3006552c0841d5db88cedf84","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.6f74432f.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDFCRA9TVsSAnZWagAAu6cP/RCGYVxh+YFZ94DIi2tI\nzEFO3l6DQyIz9Gxm3j7/E8S0GbyKbO++W/OHS+3SlP4Gm803INJw8X66hkvO\n3HqNgvGCkxjX1/xjtC502+dPQ7JCTiLD4L/OnzPHoKQC39YMYO2CMRm4KS6h\nT2z5xRsDBXkUNN93SXAYe3DH/2Lp+r/cW8SuvisWmsKRtNvoymXFud4Urzna\niYGhOwUAwN4j6pKG8/C283dUXkmCIMYXZxKWPmHeD45BS45qotp+m9pD/iYu\nL12eSsGLLvHN5e6TuAdZW5/j3wiQXppY9y8BTOkIhWFuE28gLKLcgncBSFuw\n2vUoFO4nqSHJOFv/D7ucqxCS9mCztT9bOCLmjMymwho/cKe9IO2NoLtIlt97\nkkY3KLGQIoLOFsoUwebnyk+3aXqIH/L7auqd9VYd/QDMCFgoyoV/2A2Fe/nW\nVdPib4Dm8ZFtBNIVuicW+XUJkQTtF1FdmMzhv7rluh/SRpelucLpNJ2zlrRI\nUTNjP1kckDSgyhjbFLvS/sNvDkqzmdfIHqSD21sS5liD7bFa/hnNAr6Aq0lU\nE+E+jZCDCY2MnHMVjQCH+mEbzNgpEK3pqwBjhW8HIeLdqgI+loFyQdahFGj7\nL24pbLH4bwiQjcseziK6TK9phjr2cWU9SWfaYC2WQNdM2lkLzyAXcosh83Xv\ntRIy\r\n=4TAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGwGvr+u1EZE2PYFY3AhQ8xaGOCkwP7r0DeKn4R4yTOQAiEAoS0zu+B23QzrcpldFzclOmm8aJy1Owm8o6DViLCMr/U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.6f74432f.0_1624654020795_0.7119910830865261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-button","version":"0.22.0-canary.b62f901d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.b62f901d.0","@material/mwc-ripple":"0.22.0-canary.b62f901d.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4ccd39bdd.0","@material/elevation":"=12.0.0-canary.4ccd39bdd.0","@material/ripple":"=12.0.0-canary.4ccd39bdd.0","@material/shape":"=12.0.0-canary.4ccd39bdd.0","@material/theme":"=12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cn8tE4oQiedwhoI3A6fUZlHDOA1irS1cr73iR8uEX2d4jo+/mfv06whFy8dj2TLA0U6LHri7sUcpQ5DZ1u3eHw==","shasum":"d318b6f3060fe954e1a96d6e16579320438cb2bf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.b62f901d.0.tgz","fileCount":20,"unpackedSize":78653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lXrCRA9TVsSAnZWagAAsXoP/R8wfxSqm0FKE6P5MOaU\nhwWh9rhQyg3SxU168TzrECFfFw6BfvC06QoIrXIAtRZYuDvoOPZcY728dVQ/\nhpzfbIx/9Gpxjrr2eUI3kgWK3P8bMOON1go0TOyPTe1PdfRys7kyORuOBbtq\npdw9qUBtsaxfIJ2ngdmZO7LWQUVxDF+sGkXy7ZKVlkxsi40dO+N15ubFBDEI\nnsaJOYKJ/w+sel/+r1K6dx6jPyNGnF0EAKrLiZlFyHOVOqq8ceG72cz7PZkl\niy3Tkd3xDQ2/1CUI480tWCF5YrgJDgur02CDsJpq5ysNpPsLYTFJAtuHvShU\nZ0tVRTlqcNTNo3hBjOyn8JQA4xvMGLbMR91rOeZgZzAGrMYYl6X8YL1TkTb5\nDdYigKeUOKTunaZdttFUHjbIST8+zW7M5/r4MZu4fYEkuZKEZVW9cyhynvT+\nQUI3ZAWUP7MDwZzSQkEHtzfHl6UI8DEAn6CnT2aULnvIhXDySKokTcFSavli\nzC/uwiY5TOc8B0G6HajDCh5M+VKF/qab21eip3mO7qqwLJ6pjKfsmrv7JvvG\nh+FPqCWIyKmqeD/L1ju4t4MosTdwcuifbSmnzXkf80ZCU/ZebOh02TSKRt8g\nOJnoW/SkSr/Fzue/bJ7N7eNMIq3h4QZ12t43tQbawPPi+hXFLnFJI+N7CV+B\nA61l\r\n=BcMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAO6Z0sXfGQKdSHJwLcCecSU2GO9bzWiAZZA4ojADiQ9AiEAoI1dA+tasWrtlZFHGu8mGw2f7uhl1Qf1367j0RHImbY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.b62f901d.0_1624659435315_0.1235399443040337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-button","version":"0.22.0-canary.73122cba.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.73122cba.0","@material/mwc-ripple":"0.22.0-canary.73122cba.0","lit-element":"^2.5.0","lit-html":"^1.4.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dbFvMCRm9fqBmzxWOw7J/NtyiTnXAZ3k5QkFowQO82fU2tw7Z/amOUFbQzoFigqj7hmCoIY/jHZ/41I2z9+k8A==","shasum":"c652aeac32ed8fb6c7fc303753f9f0e3782a0b32","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.73122cba.0.tgz","fileCount":20,"unpackedSize":78979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfQCRA9TVsSAnZWagAAzrwP/1c4BUZ8OEUO5+jiVOin\nJilW2eHEAB6WWUcOYKWDCNYi9/5BlLso30QX1UbCwRb/k2fnxry8GnMMHXWg\nG1SwmQ/y5zzFzl85AEvsOuwWfv4A3rFGUM+c3C6rc0lwFDknXBmq2y/1H1q6\nTvz6OQBLhfuiodp4sgiDdf8k+pK8TdLeQebVjKZ/A2ZykG6EAutRp/Yuod83\nWe7+NefYLrCTY9ps344D+03CB9Yf0ArUDp/YQvVq8NEd8twoi3bby7PPetNu\nFK/57RbpF6O9e0IE5351w+4KwDGmngfMFiIqoSA+/FnTdtDS07PK6r0HkgdB\n18yzwu3wvhgG2XvFGWr9nkcZDdV0IKLbx14uU8+mUeqyuOUXajzd9sJqYPsw\nk/KCPqeSP4HMLKqsd5+8xpnsxjSomKCPN3S689H62TeKIOO8FJOvYyfNu8DT\nzDmP/8G8KpdprB/JQoY4RaqYuwYSGP76BrdvBJ/4Dy9+xIPIwY32XcsoRCAX\nQXgHnnRkxIsB/CsQ8LJr7PETd2D5u4FRPrvug1yQ4BxZKVw0dipQ8BAjbIHs\n888X22sBHgXF5hGQjBGXEQ8E9tVTuw27JWjgZwAo/TT5FuqnivYquXPeK9mx\nfIcvOFFjEUiSD7Fj1DxOw+Q5rMS23nF4jrcojN3bYBSzLIx5HfgL0075iHlM\n5FE/\r\n=yQ7r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDU940xJ8NCda2e8M1FBx7yf9rv+djDuYh3FfP10FSzMAIgCIf9isJtmT5IgwgYKNtwsnROvAMxy4b403bK8/hy3+w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.73122cba.0_1625081807815_0.1499274782298876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-button","version":"0.22.0-canary.a6912af5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.a6912af5.0","@material/mwc-ripple":"0.22.0-canary.a6912af5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OGHB+iaI7PMsolDeXzma4qoxKxy0bDOhaoCFdkso8o6Vmx3fl/Ur+9jBhxuPNuc++mQyrq415kzpzA2Y4wlMOg==","shasum":"be6530921db728f3b406889b473139ac2e91c57e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.a6912af5.0.tgz","fileCount":20,"unpackedSize":78979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTJCRA9TVsSAnZWagAAl9sP/2Tc/3dBOz67TGwhjk6g\n8Y65nysmD7pyhrRVC7gld05mjeS7wJIrMg+VaW2CDOFEycdq9Hi0Kbits8SZ\nKgBvrPZ/0JTr8o6NFXYdFWfw3o8vF1KY5Nvq50/2bmYpmIL/jBiYpSfBOOSE\np3Vhzv+7RdCS/sALAwsvln+WcxtIYdca9co4BaaSmxIhYvh5j0JLZA/ZwSKb\nGQK7yBnfUZPbZTfOPsdtFnF16nS2y1z6A/WNmfSOELeSaTjwKoCIwQeay43Y\nv3JPdM/H43dkHMEl9pAySfRqczmi5AhOZ5A9npDOxpKlZ9qeyUWVYBaPbirX\nzsyyr7B1QlRte9hR40hiBOENuDMvlfeNTLOr9OHnh8eOZw4EghXThP4xhwOf\n6GkbMYxMAxxq6LEc0zBeroQVzQHVnyTDKUna32Up8cZ8Je6wJAFP8s7c0vEj\nvFL9eYsXZlKVpGKLyoCcw0ngfvK8C31qKJWqh9hSYQGEdC9vy7PFpo3o62fP\nZiAbamo7mIGtIvxOtpkLG1J6flDkDEBdRnv85np0Zp3g9zSsC6c0cRw1sXQa\nWMNY44RJOQ5AqZPZOUQv34Co1VmFsItPk7BuOxtkRI0UHzoqn5hDY4PpyjfL\ngvumoWlJampVQp5WzrZ0gNNBiBr/eA+Y+2fwQLqqhDCbEi9QNB5dOji65rP4\nilW0\r\n=9zMr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlEE3jJzIacSZHtuJogqPSImeGsuJVs0FzVDsRedBlDAIgHAUro+r0UIFUaee4ayGk2VfhhFGODfVqkUBEu7bnlng="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.a6912af5.0_1625175240914_0.21713301142374886"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-button","version":"0.22.0-canary.134f24bf.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.134f24bf.0","@material/mwc-ripple":"0.22.0-canary.134f24bf.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4c80072fd.0","@material/elevation":"=12.0.0-canary.4c80072fd.0","@material/ripple":"=12.0.0-canary.4c80072fd.0","@material/shape":"=12.0.0-canary.4c80072fd.0","@material/theme":"=12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/AM9oCXO7cKuGjv1Y/bygucMD0AuFyBJ4cSygMov8Ui2y+z0INgLzOLEcmnTjJAEmgP9VOpOOUlaRTCgiVzgiQ==","shasum":"cd126168673b79a5152fc9b34eeb9cf7078d3c53","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.134f24bf.0.tgz","fileCount":20,"unpackedSize":78979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kJ1CRA9TVsSAnZWagAAcqsQAJ6ryuSlgaeiZmrIpGTl\n73DuVcn/qdeRmzJ+jaRZcVCDSVCCTxihTV8O6jap5KU6jSS6ynz+YCNuy40N\nACWS42RDdinrCCckuoGvdm9RtdKLWGPPdNd87he/kwVzMcVbGu8MPTrCC20K\nL6VTqfe95ULglNycB8GlnJ/zEYeFHtBETbFVr7pMLTjqu8dyOIy1MZz6tvki\nchAt+PJ0NeqoIR4RpvzePEiAbKaPw6veVVQr2eYUcjaJMV9+OrZdq2kaxR4Z\nLijlIVeuTEG1ePLCzY2z3pvQdre7LkizDnNJ1vq73Ir1Wpa0fG0Ta1B6NV9S\nTCt1TOKerdS9uTfbm+8ToloGhy8npsfVximhk/Y7KHOiWseiQnxs7wi8SU/T\nQHh0K3X/72vWgoMqO64HCS0vjW05MJ5l9zbVU0e1t3Diwk72HoNUQhRzV+kP\nGM8mbXx0C44BgkUw3FZ5Z85AsXb4c8hRheOFUEz14SHZmcOr48PN1Qyt6utO\ntoGtJmi9Ruyb0TioJDCybrf69DVqvHUqJY4O1NLRbd2GzctJyF+Pg+fQy1Xl\nnC/1TdIxhaIpTGTQmzJFMSFhsmRaxVJbTMYfP1LHUmDFxet+YhLNYS1SEHZe\nA+1++74y75FqVyQzaIPgSvcmpzSCN/SlucHXEqumzQxJEH4QWxjB622tR2Ue\nYDEw\r\n=qUKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA9NWkTavm0pznknd7azMJrprjSOQ9Vw1/eO4Dqc9bogIhAK05tND9ZA9Ta/ovMmh9y4dRTSDEePWcgqeePe8Annp0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.134f24bf.0_1625178740800_0.21002472545875928"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-button","version":"0.22.0-canary.1debb78f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.1debb78f.0","@material/mwc-ripple":"0.22.0-canary.1debb78f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XCrsbGMCArcxVzA++1nMhKOP/CoXUTZq+Pdod9KnuN8iCRi93+TLAoFLr+wnDnCMtCLo6L/wYgzkgxI+ZEj4pA==","shasum":"8e46625390aca7ed28291af2c7c7838c660a500b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.1debb78f.0.tgz","fileCount":20,"unpackedSize":78561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PldCRA9TVsSAnZWagAAxKsQAJoFEJSEBPT0dQ4C7SNe\n+S5kG992WZaDi50ao+p1deBwyd8DwMitMUiA8HxEHCok1/7MAzC7UyKN+bai\nPiRzSvUJozo+jLf6hM/kqBM0TFnJivUJ64EdHpgz3g6MS5c6JgHyV3F3BUb4\nvc5dFlXJI3uFl5ydc97H2aGuIFJMOlRS40PIJSymRcKAvWh9AMAN/kJhmjia\nufgF1DNxfypKJ3IPct+ImIyUjco0hrW7JvRZWsjSesQ3mJyn4SEIfMOgZE/V\nZ9YJAErD7SXjkVsizWeZJUh5WbZqNc5HrHZNLRKDPIWXJaWRgz5riz4092rh\nqw8f9jysuXQgSMgU0YzuWbgc7vjvZJCY9dEdkK4wW3xnAkAzrQL/vq8BmJE7\nzrRiJbJfkg0ca+/n3W7YtgaFBpj6Dy634L94ujkEZSOGpUen1rIPD9NA0PVE\nXPiYN4lLHKZmz3/fF/aq1IeptjsB50vQsxtfDuE44xNRy8YNpuVWNBCoZMsH\nMv5lLadH3KfUawo39YF2/G4TlBQFpH9leJRtbo/BrZckBy078cV87cAb1WZw\neIA2SSyl3CePQQ5CfHEvLCxAnas/ZhV4scQWhSIGVol08VGaY4WOgcXcS8gu\nkfuSJUQHb70ecXjJQI/FbAUpv1CTSu1hmKT407/vk3Et7L6iRAThEFadeyZz\np19Q\r\n=Oz+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6xBYCygo2nWTZDMy8TLMVWFEUoRcS68zIK+zPa/I8ZgIgaCXff9ImKiy+pLQq2PY8f2JrPoqAlFB93H7ic4IYUNY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.1debb78f.0_1625618780682_0.05121800129051768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-button","version":"0.22.0-canary.d53edeb6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.d53edeb6.0","@material/mwc-ripple":"0.22.0-canary.d53edeb6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-e244ImlCM4ecSqaW5bFkbeViP7muwRaa+JxVhEZmqOdXO3EG/cIluznrxi+RzWXf1COGx3gV18tLxaJ2B4TUEQ==","shasum":"3776145ed98d2e2cbbe8f16b9ef18a720baf1106","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.d53edeb6.0.tgz","fileCount":20,"unpackedSize":78561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d2eCRA9TVsSAnZWagAA2UoQAKMqxJQDrSroOeC/b+v4\nEZFAStRjXYwmS0FgnvSbgrUDgvPfVtbOiCJbZSv7HRoW7GdGE9LerUj8H92p\nwViGYSzli+3VUR7XuuIzXr17Yensh/FGAb7dVbQs7kSPBjji7VEDLESOc0HB\nUrdyRul9/MWcYUll0ARJ07JGpOKkk69igiSWEtuoYUTBJpR7uQtUk/WlbUoZ\nV1LArk7oUN8rwcI37RJVFwcSjFQVCDWsNuydGeGvKSsJbxTKM1WkqbITq8zZ\nr5tfFydtuVLgp3VR3mT5mf+fj1gnFjXgz22JZmCn2LBgqIJoauRau1Bb2Sxh\nNnm77FXkPqXt5+G88ELds5wNLqvjIP9ZxXnVfJLPbGoKH+AX4C5ugMUFc/HN\nLGPP59bES/l4R649GecD6Wk8+T+Fv8pOPuwDkAaSemcA6wfwTqZA05IKXFF0\nvtJJtpx2zDY9R5om51oQ3Bok/eBuz9Odj+e5H27d9Kn6qqvtKmgayFgNGcN/\n/XUrjsgmu8Z1+RfbtHKVYBYcsJ3YDGu9GGolmRXhBWJG9NCJMH7n4JKxfo6u\np8F2FWBDMwtbN6ubC2eTSMdqcdc/jpiEMdfeizK9ufD7rB8C54g36I6LSwBm\npQ++krZeDjYXga5d0V994NhleAJj3PvFuz1xpywuqqgrTiRvkk9GX+oxDgIS\ndCjp\r\n=dUBe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICh3eHBmQN29908kOZkiZyDe+s+FC6p0NxIjqqz5RLVgAiEA1XOJfhl33Kazqx7dFu6e/muEvClh76IbsYR1CX8TCWs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.d53edeb6.0_1625677213708_0.9272411969265515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-button","version":"0.22.0-canary.2226489a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.2226489a.0","@material/mwc-ripple":"0.22.0-canary.2226489a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.d0f9f3f2e.0","@material/elevation":"=12.0.0-canary.d0f9f3f2e.0","@material/ripple":"=12.0.0-canary.d0f9f3f2e.0","@material/shape":"=12.0.0-canary.d0f9f3f2e.0","@material/theme":"=12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ca29g3/RgZSGmJmLUr1ZGR69VJAtGS7EWisDB2dlCEPxW2qtvjAGyin4vafLCc66Tt6DOfeuXkHREkvR2NRnVA==","shasum":"8a72754babc9b24577fbae42d05e9365bb1e262f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.2226489a.0.tgz","fileCount":20,"unpackedSize":78561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z16CRA9TVsSAnZWagAAg2gP/jdbXJCqH7XRlEIoaGYs\n3rIn2z40Jnr+qwWSMj21UhVdtZun9Xat3IqoOInim9g3XmWgpjVSYOdlzjML\nKmA8OxR5wFXEI5Ct2ZQ5S8tlIFUk9y8qk/rGGGWf0iMQH4v1R3Shx8OSlCho\nHaLTg4OkC9Ny2y9tQxeV17IJqQes0nAN4fjJk6//I0GpB2zgG+mQh8TiYxjX\n8xbZPFayV9Dl1G8ToKog853Et9QjBWh/5WOYnnGHmAfp5yICMMjeLnvJvwS2\nAoe5ZWWGsCEaCpx7oTu8ZYcYlIq4oCZyi/yod7VTt7udD9YkJUslF9ZX5rYg\njnoySAC47qs4Znp2VDODgJusw0MKbo3kjSmE/D6lGx3D5MZl83j6prGLWJn7\n6cpgDvPO9PsIcf/S+sjSO81Jsoga01rdodXi/B1blhUO8ixa9J1ZYFaOVgvv\nN69OYZREdWO6sA/RegoRWz/MA4KbYsZf/NiaO5GN5Rm4iDTHP1NYS6i3L0xX\nqsTjFO6EqdigvJrM8rWr9GgJxLM6KUdXKIEYTRKWpcCFXt+gVlXlvMdgY7O5\nODxsjzjxVLVjImXpIfTUyerWoSW/hvdeC+U3zNMsEZKW186HWJRjU/9Z9cSq\nQ226XC8yXkIJR7UUesHMQwlTANnm7hEJie9OiXi3t0c16rW8bng4a/J0GPUL\nTwZQ\r\n=nELL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDCYz92A+C4POCtv9rHsGMehsIKDqLbvbOJCIOr0KzExAiEA41RsvM8l/+ZelyaeGIp40js2lQQH1x696DXV35YiJEI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.2226489a.0_1625767290227_0.531494840355806"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-button","version":"0.22.0-canary.d4801c11.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.d4801c11.0","@material/mwc-ripple":"0.22.0-canary.d4801c11.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.adeac0549.0","@material/elevation":"=12.0.0-canary.adeac0549.0","@material/ripple":"=12.0.0-canary.adeac0549.0","@material/shape":"=12.0.0-canary.adeac0549.0","@material/theme":"=12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2sf5XWWzHHblG9FH1UUD7iZ4JdTUInyy9nmIclHFYlLbkGwNb0xPFKRLO/lc/jw2ogAvgCjTfWhnEtZNYUKV+g==","shasum":"fa27b8f56a7a445cdfd210f45bf39ac11dc1ee38","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.d4801c11.0.tgz","fileCount":20,"unpackedSize":78561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51nlCRA9TVsSAnZWagAA4IkP/17vMRUyMr8nYg/ABvue\nb5o0kbVsn3tP/1PaEE3Q9n6sr51zFi9AXJW2AiqKPPRK/PYKJwDJpzhcKZY9\nks9TvqIsNWmOsYwNYou3KcjpLC+PFUwADD7W3g1Xgxhd2bBP8ZD0LrTmA2fb\ndVK8qZw2jAS7ZScGVVU8RlbH4mOMxjNXTbpnAuf/o9YRLL5WfsFl0deZFZeT\nobkNc0gR9EJUJ9MYWFkJWKdnHrCbjcy6CHrhn6pJpDNCTIyHXtR/+ZY+5UfF\n31vE49U+YRq7x7Tl2VtYn1eNVd7xxR9BuY9T4Jjh2COohWBdHR1ZfUP3DEl0\nMksLOuS+7rug+BBSqBNYDXoWtvwg7XyydTCwLTuwq5GlsSKKIVJw412P1clG\nJlxpkK47/wVyzOnPVpsjh2nh3anSqkFljg2+gW/3emPTp/29A3hIOz508oYc\nxxJLVvDfYFLNRR2rv5uL4JeRIq0Gb9JkJam274lFeO6YFnSmXt2qluT8yVQF\nKc2UQQvPxjr8fq7n2csvHiTWN4psvZIGeO4pUzNIS3Ba/NEzwbiuIp1sC4Ux\nfQC3Glrt3bYXBaaiR9DGJviU+c+n317qrnG/huAJh8htTMmlbS6OPshvWSB+\nOef/6QsBhDBcYxtDpkV8P8/ReS/TLiERPv8THc/4Z2hLPRhEoHe0bqKrVV6f\nr2AA\r\n=fVix\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7HKFMbvM73/nmyLVFegoSPxqj0yePXmTWQB5m+u9aVwIhAOjh6PCZcjcBmJXJpApZwAh2Bsa9E0S+HEVxXQoiujQN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.d4801c11.0_1625774564761_0.5416881748091"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-button","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.7ec5f2d6.0","@material/mwc-ripple":"0.22.0-canary.7ec5f2d6.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.068fd5028.0","@material/elevation":"=12.0.0-canary.068fd5028.0","@material/ripple":"=12.0.0-canary.068fd5028.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ApeOxCnsKxhjm6ITUgIqfkNEejRnmS2ckObE4atnrDGG5bBcgdea8KcFcTU7QwUa/ywI4YXAg5V8Vee0rdRXnw==","shasum":"943f2389681d9eaa4de9e8af67830ae58ab1b0c3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":20,"unpackedSize":78561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7Hj9CRA9TVsSAnZWagAArFMQAIMZ/iFlYQYOKmw2hA0B\n+E84q+ox9LMYryO7VqO+NHDlXq4NSvv4J9NxbGELxHGE8sGJiRcsuYGdNVBr\nc0G/oxqU9JTYO28AwB7r0BmqF5coKDGHIggIq3Fl/CAcS5lbjo8yVDWjPlvy\nP6FtbntzmQVRVO81FxUQzOil68DXWeVYLGVSPfxUF9kZjy/qCQ2XPEeLcprm\nxs8m3rIqD69ZmsC7uWqinWkXfS3Y7EWVLgEBDsr7vmwHVUi59FUtPwIzRQ6l\n02wJWB4rADwERULQ3WLrQkOMefBbqjN66NTxuKRdWDWB/SGjCiJr+mnmfJh2\nAbpLt/ZOaEy3VlezMQ1W74Hxzy3YikBrnaY9oLdnrV6sejwALkemiKB88mig\n4nwF9BloLRdtMaujF6wcc/v3dX23WBXacQKY1lSZ1tQQkOvz+JScY6VV6260\n8THw+MThYoazJwu2yobAtFpBPEMOqAKGSXf5WRltlKhSvMneVsUGLy8+Nwec\ndtGufP8uuYsRB5dEVT+yXGI7H0X9XejE0xX6dCLlrfRyfjwqHHuYMW6gy9Al\n6v5wz87cTlqKF//s/+DK8wc3y/4fZU3HAW6NHy6JL7Lg3ztfuVzOXBmxDFlX\nPTwE0KSo2H0dR5zE71XHoMYtRxcM2PkQXYosE78+lCv7pel1WoyQE/CfNjS8\nUNgv\r\n=HYG/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHhb5CwGhRsE8Hbgl1TASNHfFFYjHV1FD49rGcvrkxPwIhALGkfCIgUMVUrvV+FILehtHCwiSqi0K6+lSaKdpy4+pB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.7ec5f2d6.0_1626110205345_0.4240633360849011"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-button","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.86cb4ca7.0","@material/mwc-ripple":"0.22.0-canary.86cb4ca7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.068fd5028.0","@material/elevation":"=12.0.0-canary.068fd5028.0","@material/ripple":"=12.0.0-canary.068fd5028.0","@material/shape":"=12.0.0-canary.068fd5028.0","@material/theme":"=12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sksr1gGcCOHIFANac/9h5+PkJoRfQABmsb9FQqFRb/AqOw2mQc5br8IHOEMhyQVeNVUN/JgYJ0XSSUtjhhgcvQ==","shasum":"4534b974655e5782c8c3f068748bc503072544d3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.86cb4ca7.0.tgz","fileCount":20,"unpackedSize":78561,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9gCRA9TVsSAnZWagAAEVUP/2s86eoMdBcqoXa8Pk4a\nLHjkXqoXAZgTVc/pz8xfOtx9KIpe1EK5OBB+1IgWvgAnsPjUl5LQ8rI0c86q\ncL4gdBkB9DPaAJl6GWCEorORRYg/5eQhmqychhkehZv0RznJVarthOIa8jgP\nhkXcW9R+iD8gpgvY/pA5bjLhMGNaQp3D7FgGIdQ8EUE4aQGVkHjnzuNj2wa6\nxjgcz4tdiSWCg3RX1tMkJ065LDRFjOGpaDAYTX6II3qvA8DWBeB1bnByxK4+\n+hVBL6fSntIpU8aiXiEVyxGb+8Jq8Lgtz6hevPTgWw7KcBZwpqGS8X3Z1oqW\nWBiUSaN7k489bgo99Rbvud+sKcGwpKgIn1z0m2L7gtvHvIyrTv3Eo4ZUhDZn\nnhuvIklg9p+Dxqq3mjlyl5WkAFMKZY2tTjruaQSuyA0UY1PlrZ1nYZPXJumt\nPG3+X/bCVGLYcTSCrCaA0FZS6QWNQp3ABeSVLP9fMcAnvgC/u2jE/mUNFk6j\n9jChGb+eEuv1dIizbG/SrpkVRD8/Kis1c4b0pqmf6XTfyhicBu2oEsdeAHvr\nv0+3XtNGiaqm+ettMh/l+mPOB7QUEOorGwC9iQkDyNhcZDxx0N87V8or4hx0\nNDoM1aqV/3vv87XNoNq9wPInWywUeR/t8KYD5dx1YEqbdh0zPpWN5o2c/7Qq\nWgK0\r\n=VcLm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIByuzX0Lc/Gx7lRr1PYZMYRWr2Vt5tee/mnqwHWNoPAzAiEAtWMcj425v5v7zYjT8dSmu74PxzIzKFL0bOTjxUGTRLQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.86cb4ca7.0_1626197856266_0.5890998299320178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-button","version":"0.22.0-canary.bc9a724e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.bc9a724e.0","@material/mwc-ripple":"0.22.0-canary.bc9a724e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.ea77795b1.0","@material/elevation":"=12.0.0-canary.ea77795b1.0","@material/ripple":"=12.0.0-canary.ea77795b1.0","@material/shape":"=12.0.0-canary.ea77795b1.0","@material/theme":"=12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VR/ObTgkuqMmsqwnoOcF03kgFzLihVkrKchqd40U4fDUAH9qzl7d4w8W5l9M/RnhzDhkvLNrz3k4fQpkutVHUQ==","shasum":"06c194f9c623c3dd40a2fffed6649e076b7045cc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.bc9a724e.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d58CRA9TVsSAnZWagAAF3EP/08R87qgD5owXsvPGqpe\nmSwfosc2xxg9QHlIpnaB5D4fReAhV5gyTo779SqidFsqDmmZgTxFAMrdVszQ\nS4frm/xVtLNAPJOGEjCRLZt3VOsD7aVkM0QvxdQXNAQCehRCblLWUzKUNY4x\nPjEMH22jkJZVcO9vaIKZAxNOFzuncDG/MFaisPYGOKiZ/ShrEqJ6+pHxk9aq\nwsvN1ipzC/O8C5w8SrQwAGR2EjSH4xykfoSRc/TEoGADVQzKuT8W7ckWb5Ll\nlltPRzMI5KqeyDI0etrjOr2Q4/8c7RtFIddC5YgSElNCUULxy8WVnUrDXeT3\naopeTa5nxaRACSDXVGqU0aZhHA5dyvwdw/mNT50jVOSup0G278NrwCtkyFQd\nmUs4sc6byOv77IXqQuUduVLjsTO6+6IEO9i5uSYFKH0IeGuAEPb2lKvKnwlB\n1VpsQ2QbSAROqQEMIfj+PK0T/X3Jul4Cs9BzcR5NHzv/I6KjUk4FCPp9C4V5\n5zBfNyb6XX1vPVxL+ZCBC4huTvnaAnH8V7w6lAnUzmKAxhNlmbvjT4WFIyX1\nQxLslBdmHvifRW3QIp7Zcm0vsBPJO+gMaFhudl9MCW90vmcc+iaYu5Uq7Qu7\nHNHbw6/5IAHt/3V56DBNLjBWQI+aFRg6gVC1ag7mVhhIWfkqRhpDXapZs3/J\nnvfr\r\n=1Mtx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/oQEviHLo6LdoacSrBMVnBwIoAU8vUZMVIiyfH4JqLAiApTClxgsX5zDL/JtokmtpHlOj7DCmoFjKeRY5GAQWFuw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.bc9a724e.0_1626201723679_0.27608265238025864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-button","version":"0.22.0-canary.7847b83a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.7847b83a.0","@material/mwc-ripple":"0.22.0-canary.7847b83a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RfMvorjTIuOFJljuxdOUrTlfjWxXtGQFwA+yQQZPZ64gLn3281HvbOJG/HoLw81yd59fmtI3UbJpEvTqcrDaoQ==","shasum":"1091fdc55f03e3be786187e1424010a3ee825f18","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.7847b83a.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xxwCRA9TVsSAnZWagAA1I0P/RkKtWKy9dNBGs6DY9/g\ndI+jH120VGjby2nSucRMCVj2vuoPRE7WADeSqtsC48I2m04f4dz5PphhHhQu\nvnAgDr7HwXer4zW6aZHz5wy8ITClnTpvIt4wJiXX3SFR9C9v48Qv0PkKX63w\nO8oorpmMLygBtCqW809DZtmhWVt5WTCHerHxSJOJP+i5+5jPCL/vPFG+oCjf\nA55gYdsEKRI0do/3Y/4oaCdwW5JFp1cqcvR/KlnDET6xTZSWMCmsDsNXiWfE\nxNuAr+mgCPND9Zp6S4pomTBZ97OK7VFanCb7pXyXya3jCcEYNxTIrJp7NIW+\ndJj7IxWKqLnqEkL5vDfOSHZJn4UlCxtFHMFUpZTBl0KVMkNiLFI6qe8jChg5\n+rY4BXmKocXgJGqz3PHENvBa1Z2PkkDhO+9/HqQIE1DQ376sGOf4Dj04KnIm\nvfzESpfRoO6DFuy5rOfKvT8yvYWuev7Rtic4l43I3beftRSLr9oYtQoMnSnH\nrQ9mSEnGNT8ruRYkmXlEracyyhiDckmUSsE091Nt7qRONHkZ4MZGYWbiOR8l\nrJWoABCAlwS6ULQ/W2srXN2vNhSMPX0Kc8187vnm66AwlRtrWQWLiYqe2SkP\novtFuakLA7FCVbZQ52trNaJNaJBOw+B8XzgW490nkuabqdmbUHgzbMixulVi\nT0iU\r\n=9Cfo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9myXPHzmaTBhO8xqVC/d5qm9Np3Z6RGGLNsMCTC+OtAiEA4Y2GNZJj01tUSQnNPSL9q3Tvu8laCco9THQ56VQqib0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.7847b83a.0_1626283119910_0.7531245663834556"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-button","version":"0.22.0-canary.8cba18fa.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.22.0-canary.8cba18fa.0","@material/mwc-ripple":"0.22.0-canary.8cba18fa.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5ZkYK+NWx94EOeJyCQp1P3QCryG6KteeuFddC1iAZGkX4rIYfjTC5bDR0RuX57xodkv+NeFXvaHCq/dP+2Zjpg==","shasum":"58c9754d24cf0353c2189334ab21fdaad64a90aa","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.0-canary.8cba18fa.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70h7CRA9TVsSAnZWagAAqagP/j4y1LQPajRDSV3Od4vx\n/vARF1a9j4gmqqPNch4ZmYCOUtvf/31Zy+WS35qaDmd0BQrGLUuUDltmkVJI\nGG0Cu0pOKeXRia4bXcOiD9v9LB/RvaAYiGz/tDSkesHTDYtM9GhLNni9b3dp\nN7mqa9EW1O8zPTOF1d8Psa0J2FiucPBVAaxqJWUHjqgT7Kc0Qk8hnAwFYcvF\nWeO5T+VO1Xw3HcYTZ6TbEZ/AHyJ6Wgok0MqSZCkeGM9/eljRzz/ZOoe7b0qY\nfKcJB1jVzTWttwCndYKweAKm4ojWB5CJ2AlO4f1hXMGMSj5iIFaxL6Dt8gkK\nzNAqYd+nrP1dA5KpFkuSVoP+iEJYgZo8WObUyrxqTvbiuom0JVqvW/fmEJ9b\nccsiZgHXW+PjLXxwc5RZhL1Tk0YRv+SwxOxaCzY65C+OfG0JKltNR5PHCrKQ\nwLhFsNZc3/X1SoA83Fblw/J5vwUZtvTpgJn9u3tCKJJ7zFR4wA4+FBUKNB1c\nLIrPKlZ70vf8qLfErSwauDH9IMgX/zWnLKwgMoLIEwpxbsQHvh12OPED/AEx\nvICFIuozMX/HfSySAJqMf8v70Y9/d7cvdLE3R+f+ZEHjOaqbdZBfAYoIrwji\nXMAxk/kZKFk3rDZGe9MV8C9O+Pt0kNIBTDpyGxmcvet0B8TWgPVAaqWIEQ9h\n2qWF\r\n=eoxY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF3+uvJ4q0qRTqkGJ3GlXmYXK/P4x0HkmneaoUL/9KSYAiEAsitDi8Dbc34frWfxRtZHlW57E6SbM/Lx5JgpAv1exuI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.0-canary.8cba18fa.0_1626294395359_0.6677550167572819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-button","version":"0.22.1","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.22.1","@material/mwc-ripple":"^0.22.1","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-Z+NOM+d7QkmIOGbVT7BA/rzLJMXGaxC4Bp+dXcm3ESu6ohPBtG878IyZGSGiMXXDtmAKgMAIp74z4gE/Y0j1pA==","shasum":"a62ba8eeef5587a2082aae118a14baa3cebbbf58","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.22.1.tgz","fileCount":20,"unpackedSize":78553,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAAqpgP/1iznbxX8S1/Cos1FrjX\nswotj1gVzJcUjqEFaVI2RNw8y2D4OkWuFj/TxTV9ZeheGSvf2dBX7rd9IsnG\nZKSlk5GS6fo+ngPv9Rm2ufoV27/SKdMrfb1QQ2NtSlx6aZujPaMdYLXnmgXc\nRxclxxCIEM9nEhdlpEAHZREmaoFXqkI/VWMd0uZQ85ckUvA8MvnQpJjP3XQx\n2uPhhc6JVa7rRm8hm1RywCCv1r97/EFpjXxNyRlYm+rwpPY2mIp5x+vt2g+6\nmkgvAORhRODQ8WSLuNwkOoHNGsNGlor4wyoA7tjb1M0I5+qvxyj50EXG7Xbw\n4pEVykY+YBp8Aymt6mcAlTCibuS8V2hyXuSBic6Iu4C6Mhz1g3z5C9Qx/6tC\nOGnEKf9EPuoO0UZ+4xc6JHnU6S5khqcr6jZ+PbtgxYosd5c+Yl3TMoEmPs3P\niP7D6otL/LzCM9ky/dT3CZ5JNFJWMIB9kBG1ODpfO+3RFc1rc66pJQw8bHKz\nHHNkbBfgTuRd8BmyMAPURYIL28MTkDKfwPP2KnXTEtlCy6r2H5xe5nkRwhHx\nV4GAxdGLLUnxv0io2ow524EWJ9WaXdHWhum9tr4eUVajI82EKs3XkQzNj6/x\n15jXxaGUGGNWukUxsgLK8VYpX+EYLegYdkkcLd9J5W3pYGmPgmWXQbjIwgyV\naw3x\r\n=Bumc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvRAmMfwREfS6UXoajsv0PRj0Yp5qgZWB6YfPK8Xww0AiEAkASqHa0L7KCNGBUH3zMIP5NI6KK4CzP1nTprImJAvqQ="}]},"_npmUser":{"name":"aomarks","email":"aomarks@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.22.1_1626303173001_0.48352763888332717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-button","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.fbc09b4e.0","@material/mwc-ripple":"0.23.0-canary.fbc09b4e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PKgsIkPrGUoG+x5OWp+Ts08JD9VjuewOt1UmCs0ZVhjpDfzp0F2cSrDsEejjxXCNF5842F8f/bV1qDHiXyULQA==","shasum":"0583a054f4804f107119fe495e9388c620a41e6f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.fbc09b4e.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72sNCRA9TVsSAnZWagAAJCQP/0PW0XKofpWz+UPo2hmU\nE2OMJlre7gp5WpB4Op22NLHTfWf3+1VdjH3ZPLemA5KRiGHI1s3QH15m68DO\n+dG9ZGUgJTlTHPG2IfCHveCYMkNLAtUIc+rey54JV4C/RheWaH4L2J5Y9nbW\nGcJmntdl762OOjhUDtnZC3pG0wd2bZR7NbhX1k/cyHNx+2UZCRJohrTOjNmX\nxDrinGGDJhr5zzfoBRTZrBeG5zf/LN1M5B+DvWVTYEsN2+9tbhM4SHYOCZGV\ngTS6PWnFHbNiwNjrN2Xx+sO/ukHy9h53MOxXGUtuBbi5dfybs/chXiHUJTOO\niZtd2cpX8xoZ1jFS42DUHdodqqz2zKKyRjmtcWCXIGJpqYhhEQvmXuw6mir0\n0qEwotULgkGWHjP78koWJnkUDxaxaIsxkSRcyjqy94b5zxiX3ujxl0gaa5wk\nLzZsHDfODFODcGFFefbMQukVYtrlD0sZHsQQT52ELAcuIuE3/uXsW1LNQNEP\neMIq45ftTmdm/hmND10gfe/e6OiyPsxZRwlqCiO27wxzX4+r15wWGYBXUai5\nmdNvVgM9i7kICjJ1Zg0J72cr4V9sdHgn3sbSAYo2cY1ky2V6wm4PjOK8Y7mK\nkcOqzWsUxjbuTQbwx1MGryrdUR6EQKs8h9DtTsyIpWzsjHGGSzQpUbGMhkYL\nHm+g\r\n=in8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDslzkV913kcJvDu6yy6DJOWIxOHKz/lFiSHDxcRIu4mAiAwt2vFTMZ5dOwF906FNG/syGQ1pubMRmf5NJGq8H6hxg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.fbc09b4e.0_1626303244762_0.8480617652597606"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-button","version":"0.23.0-canary.73e9f83c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.73e9f83c.0","@material/mwc-ripple":"0.23.0-canary.73e9f83c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4c0PJIc6E2EbC3tbHm6m+baNlf+dKQBq06x/eZA2yrE0/lZalGLoPwzzTbd2DR2QQ0aUOPLlX6NhoQxN2HnKVQ==","shasum":"0b42fce4f636e3f088302c9f5232864f806ee110","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.73e9f83c.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0FCRA9TVsSAnZWagAAAagP/35mlw428fmf8WF8OZkD\nYVGb7ReUDXPKm86Aj1fqaZPIR4UXcDldJ6EKbKX0M0kTRF9ZlpEi6pTKE5dd\nYSW53hsYh98QNyQVBGjSB9WvGPI+hMVSyIrwV31QErtQRj5Qa1M/sfVqep6o\nX/DtV/pm25Y4cMbxvc51TdO8u7iz6CXA8eQydsVzjhyXcEZzPMRK37iCsux+\n5uiVxRJZ8/TEfgIEeSHaVXNQwLNsTTDZxZdN3xe8LhaM+/aLiLoZfc/seMI6\nQ7lVOxWyY13vkDprSfw4DAm2Oc2+2ZaDxeOt67XgXlTMUpxXqTRPLCnNLUAC\nO37KXEyEDWdHqEhh+obYI42Udh+sKMFiudCCH+1OisxLKU8vWpnIGXP4BJaW\nImGJWKB60exlNZoyfsdIttl9jTVZRL3gIbp+TrANbLPezx2HBRQ2DMcoMHb0\nRR/yC5gwbmMort6F7gprFbVI8fdNmaax6NebD7rFzo7GhylMBJ3Vt1O15hsM\n8g2jwJRg+/d+2kRxFjy32IJPPleob9QtyC4kFHyYaDaiUUlQblkBPKcX1rwj\ncXPJR59gcqoRBzHt1yWzbopTsS3CWqwQLCotBcaHpRPZNjhWnsvaui8linm7\nly6CIyixRWyylxcgzFnOl63X/W5g7hCfird2SC9OK55FQHITuAyuDW+1/fDh\nHFAh\r\n=PSMw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvTGhl2oksnQZ2MWG0bP+zzmc2tQJswxhmu6IYnhCU3AiEAxJI8wIIhYP6+XWtWofTV8KjtB4IVxWoO1F0ooJAPUSk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.73e9f83c.0_1626381573048_0.7081316208528499"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-button","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.cc0aa7a9.0","@material/mwc-ripple":"0.23.0-canary.cc0aa7a9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T9ZxbLOsKRgs0MXU70TZcnY0qVan2AVAWA/Up4Uex8TiT1ZXkm9EFRyUSnGuNqQLeNBy6/csbKBCMoYRLJZ2Yw==","shasum":"44d977b80941e9462608e1df02cf81b18c58f278","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KKvCRA9TVsSAnZWagAAgawP/2ernnab9CzzDJ8erryD\n/u6+MtIZcDm891L8a9AUXaurBH49+NfQP9bvXCYqWQTYz+2TcgtVzDa1xjZP\nQz9OvMks1gxxxtsF3cu0KlvY4IH9WL63Ad2IuIESWv3zlcU9W7cM4qR5VDes\nJM5UHFXIG1w6o4vGGPTyt2lsytFSflmX7BwX3UD7kTg7RHNQ6gxz7I2BG9G/\nyJSZuojnynjEDZcbd1IhFpZZJ4IzWqIXvrXdDnl7uE8mCHlZrI0VfW1rr0S0\nNWfVxsUHQwkJgxR5m6yyyszNCfOIRhlXVHtdPWqxh3FAlQbR0VO/0xTP5JpV\nUE8aGSuVfd91pgFEMLKmBvCs9i38dUjdmDp1X/GjJdn3EdbwILACfj2fax+x\nkK4T+8wy9ymBIJhi6X/LaouQ0Prt7dCrxtgLVX/UNGkCnQ6un5C4O9At3b/5\n1gg65jrEsgAJQodkBcAyfNPqznMzB8RDLaAEyoZ7nEZ+adjo5XBz5QTSbxiQ\nwsjO2igoMPVcCLyOg+9h1YL1E9rsCssFhtrBvFo+m14q2e/JTdVTX9abN5sS\not/cjDRpIXIyVS+ly76LVviMesmerOKiJcEP/GxRUoDVOikxNxYYV3d/Sd9g\nwNi5gbj+xVRRwV90py4OvWVMtyBmejBXXOU2Do/Ua4LKHbhOP5lVxm/3tbw6\ne5vS\r\n=0YfA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICW4BJDki7+/HgseV/vCGVbsPX8Sf1ktapdKUMgCyxWwAiBsOq+K/FZrxygi+WBHCANTTYZAk5km3vEvNzzn/Lo7sA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.cc0aa7a9.0_1626383023631_0.9282471636247596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-button","version":"0.23.0-canary.a8fcac45.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.a8fcac45.0","@material/mwc-ripple":"0.23.0-canary.a8fcac45.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XIBQxk3dzsFMA9gTF0ibQAeEE5I+38VSVi79jN0ZdybIln+jWjmkFWZeByiRKBWT5WUddJIEy/G8xE5B8ovmfg==","shasum":"7c62907fefd065c477a686689d9f68eb01fe109d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.a8fcac45.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KceCRA9TVsSAnZWagAATH8P/2ZJFbZXlm7+d5oYPqLp\ncuQ0WLVTNs5h3621I39ZWpOyYxcqJQ4MbCA2o8yv4ZaHcqhdV7PUPHAOXkEF\njtRmi0zvywor5QBhBHMpPO963GnF+LrS8JDyFM6vxQBfMUoFiJ7xDoAGXcBm\ne7iE0NBl1Eej6GQTDYMIM2engeyIA07MrVvVuA28OhkXLpai7HLSumKyGUuQ\neIyrMwr+k+Qdr78rpBTuLWAix2CUs8OQmfUUyemNYyn/F1eg10u4xeJNqieR\nb/nJOEG7XEDs6wCq+EOUTPRpukD5igfiggH6ngTh9Gf+RqSYawkBEWuISMHk\nyd1MyXMyCm7jNv2x1XJZwp3lAqELrKqvivoKznb+kyu63PTuUcQkuFxtEL+9\n3Q3b7NRvEvPz84+W8dpOIAeSYItl9azY5Lx9b2Xv6m7OnUyTTgkSn5V1+G+v\nLje/MPRs/irSyFMYAdbF+YH6ZTLCHQXAM8cKcPV/dJZU6pGytWFcX2DhoQGt\nDjk694sr5HCfdMxfVE/mIFJeUzNpjivofpr+HRJ/xdYV8Q7a8UWjTQGJPhmF\nfMmYZw0AxzpLg3SUIpBXEfhPBX+PBhwI5LZmMd5T3uPejtka8iFZ5JoFtavO\nTwSzY7pBBzANn2B5tWCOrbjFNqCYfZbL7tpuPfVD3jvfLrdYrHkVTCmq7hkw\n8gOP\r\n=hUui\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoi5I3w5a/f8VXdvTlASWtsnFiMnMI2nlB93NBluDbiQIhAP4+wmwmX+qNY8jCuXZL1UlOykhW2w7pULx7KyPFk6Dd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.a8fcac45.0_1626384158579_0.6052863674024804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-button","version":"0.23.0-canary.3ca580d1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.3ca580d1.0","@material/mwc-ripple":"0.23.0-canary.3ca580d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zSnktAThFmsjcz+WvrN0R1ht1ypcu2WjCS2W+KptRgrquSrec01rWagb4iL/E0yjkls3kwbSOyUUBdoNxCDBNA==","shasum":"e89561e31ae8762a66dc22359eb5b3b27aa278f5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.3ca580d1.0.tgz","fileCount":20,"unpackedSize":78605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDTCRA9TVsSAnZWagAA6i8P/izPpGD8dlv1b7gid53H\nuYmBXktZcNRkc83Y+7LC38hM70XLGTOegR5mVT91JoDiqKjumPAB5jbiQ8s6\nU57KqPSMWY8lueHM0kQxnJaxuwtbPhIDvf74AqgpXtkxmoAVCvXDGNAc0OyI\nVwa7b5vEtQTsJKeDPy8/ZCPbthFXafrv9C2qcRbcrEfOiP544zIegbW07/TI\nITwDsGFAQcam6mC/9mpxH5S+2sVQHPelYV4sRJHWUqEFWMRD0CblPmYwVUMd\nJa78PwD17lEthcbLVjHFrecGGzDv3HSKsbDEULIQAXWdtoFJMMhKFZbZuakR\nJSrnaYlYqRCabD9iOkEnYzXqpqT/uIzZCpDW+SUNaVKKLJFHRRoE6g6fDF3d\n6sPZFTVe6+Y8SfSoLKlNZYh/KNEkN7HOXiiz9QzajXKG1eVyw2EkP05DF0d4\nkvWkNdruYmQ74lqtMA+mKAE39NLUxsiyN7pnT7QcHsMTSvXwTnMExhOd9+zq\nw9Y7A1wJtd9c4x0pydkre5sYOVAuFi5giY7t4RlG9QtKf6Uyq2AWBcVAWBVL\nWn0Q7+4Hb8dHOp3pFsLKFhxbKyRsjF7qDsHnijO0lLj2uDHr/ivQ1BRcDAM7\nwsDIFQEpJ6eECOb2F1J+65JzTao5fKPVHMwV/mSki6S7CFdMxadeeULeGnLh\n3Zcg\r\n=6BOM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFyYNR35s+yOAl7qs1DKBFEvBs7sX/hZtSooGJc+zAOeAiBkWXOPHjO8YedW4xy2D+A/RUMh/OX3t80pc87A/mD5rQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.3ca580d1.0_1626386643614_0.46921163282808265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-button","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.9e41cb2e.0","@material/mwc-ripple":"0.23.0-canary.9e41cb2e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.22d29cbb4.0","@material/elevation":"=12.0.0-canary.22d29cbb4.0","@material/ripple":"=12.0.0-canary.22d29cbb4.0","@material/shape":"=12.0.0-canary.22d29cbb4.0","@material/theme":"=12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1efckJFZJm5fVIA8zYDaiVfyfEb2PemL+NrzO3u8t4ot8iNZumw4wcT+DKymqwrdH4uezSVT9Ox8QUgRLLU3rQ==","shasum":"d508c8105afe309ac4ef6d1e81d809bbbf87cdc2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.9e41cb2e.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAACRA9TVsSAnZWagAAX+sP/irS9sVezqJjLYOZc97z\n6t468u/aG5Yz7KKaYbTTtom6WTetJWsXNgii2j9vADtD27wLBUd/OoVtIB4v\n+g/SvKyzFWdTPjLMKiRiwXKFq7iB1BuzAU1nzhnVid76sCAXYflyViARi1x4\n50rtTwMuJFSYoYlxT8SKoM22mw6EN0wN4ERFPOqGrF1H1UlnWxsRXAdgI5Ak\nyLYpMXNG9NFPvcYe0VRsbL+U035+7k1RV05eA3WFMx55T1R4QGUMGmFLrOND\nXiJTGjKRfSVFMP0L0CuE8VcPDQhDI/9E3eZ4U/IPjhKKdamD187DiRpEHcFw\nUPjfvbPWc5Q5bin9rDxR+Cc5PiUIYydp+FAZhhawWWwexNmFqlQGKkufSUei\n5Awl+s2ZmzZ0Jea2K4GWbFMQrSWHtgsvL2o4TylfO3aA0PredAIIJomJqxQG\nU9zoai94gSXG7tEa8w56AL9GN2ulp2JwoRRNQH3ccxgRfMw0i/QsN/2bOLLu\ndtrFxE5DRilO5e87UIO7XIHpV7henwaB4ZEbkDm5Dp8a3anf1Y4TLTkdHKgn\nKqgRgMXS1FReGH4NKdxbeDvICtoE6386ssNsUDYuyDNBTf4IDoNoLd1E6wLa\n5DGEQR9gkBuA5FNs+Xc8zGrfrhFLZ0IdBG+akx2Sn5YE0qNPcmF+yi4Pk6Ld\nYCz0\r\n=1YxF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAIiSRxDeQp9JIhXCY0SE04gNIzBxrUNMS0ZFLPUr2gPAiBVYr7GvPE4gW4WVC7V1IJ5wcZe3Cwm5I46VwKGKVSFJA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.9e41cb2e.0_1626390528620_0.931508228400947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-button","version":"0.23.0-canary.c180db74.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.c180db74.0","@material/mwc-ripple":"0.23.0-canary.c180db74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-++HH2tPH02PQrR3hVrtm084a1NHvs1ZtCOPMlpP4tqasBG+8EgqEpdtZzQKd9cK9kS/g4CXZ9N9MXdcs39WXUQ==","shasum":"d05e035c4ee98239730d6efd68c9ddb7d43e6f9a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.c180db74.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cDsCRA9TVsSAnZWagAAeSYQAJ/yOP24lcofnEj6blXn\nBLSP3RjzPHGT7DuvTtsjWEhHZCFX6BkTm3NGuqGMmXPcdUOetkSmiPVWrE+d\ngqNqaFGD66aT5Bt4nM16Gv7d9f3eOBj3QATY41DOao5Jh1gYueovzXCib5g2\nzDA/oOnY0HqKNpygOiI2FjlBcAEoOx2r9P7ReAJb3CGzEAALT9K5WlSNUOaM\nZ4ibgxDnW2HQWd+ZqhcsJXTXrmpAjnY1+xLEJoOSoT36DUsk/UM60fQuvpk0\n6B2mlyX/LvNQ80aLZcNXdmSZecptt7K4VlMbKfrovklCZsvk4SWuHiSNcph7\ni0cpG1lge03c7bhXPDXhvB5FwV6YuzKp7NKzRnJVadjKOqtjbjon7nvGZOOr\nv5I3GstJ7GnOX6/2PXIyljV7Pj8ljXzL/9p0NMqzzOCmENcVgwd/zHkc+xgs\n7Rz0B8DFL9Kz2fpRCuJUJrw5zEY1zzsRqC3ASDOZp2mzaQBuBGk35vujpZPt\nyvudIk41eVlole89qvkqGW6aGmj0D/o4X5qK7o+HLBAKrt8FFrOozYeLchKF\nusrVBl0Zb0uANxkKDvU3sVPUEu8cYkAt9PnWa0z7Ep9NVhwupuafFn9sqWiP\ngy+E99q5UJ8j2Bl+vQYIr66Ju4wXcyXHsLyqy1BSdPbnSe1R64g5m7Y0BBwS\n4OO4\r\n=ahyF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0ZJJplbwyl28oO1VFJUCjoyUXN1E4s733UBem3oFQ4gIgGbVfE1QrcKEunBMlhSTR0zREU69ntye7xaGc0YkeVmo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.c180db74.0_1626456300174_0.7451023550474749"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-button","version":"0.23.0-canary.0d0a9267.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.0d0a9267.0","@material/mwc-ripple":"0.23.0-canary.0d0a9267.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c0k30mUG1gNwuvQYFKwtVrH6Q4WvyhRU0mS5J5XKfUrdt96RQs1z+vrAlalxj126dLTpX5n4zyqELnI8KBXugw==","shasum":"2ade927b188cdf72ebfb025357c9c8163ce189f2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.0d0a9267.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ch7CRA9TVsSAnZWagAAGxgP/jh0vQpQQx2AAOcM/Nhp\nRnao0iqJZ7wGq7oYAEUHZhrzgm0ezBVv/AZ7s36uTGGl5EW7fmCYPKOvanPq\nLzYtyQZdyyj64ej8QqEnHV0/M9l03g/99a6V4sktslkTfGBV+Y5u9mH2Xt2U\n3l9WGtrIFuODBXX+gd8gL+7xKMKZvPEv6FIuVtP2ClR16HR+tMY5Dm1JjQVW\n2tJINs1B3HyTXrQ/De1E/LGSNMGbHi7Gcsgdq601zM29MXGtWzTw9362wBVs\nyhiffZnC24LeQK5o8RjrJILwLZhWVAQSPkNKoV0/akB4VmK3ugJ8uTkXalm7\nOis5kGn6HgkaJOYJa2daiFc2u4Bywb1f3UqLqMTfznuyiItF1Hw4jxcouM9c\nYYonp45TzVrdP3zpo2GBs9qU0+EmiDH4Gu5yQJPlVg5py3j9IE50frSBTlrG\n6PpyVlRZm0NLh4nGc3ZVF9kxIt7UyqjTvxB2tZ5sQTLPBRX5Rb9l1U6cZYUK\nadT5+W0Gnw170wDSzXCLRm2XjGeO8N+fTTz6Qwd6/Z5NT5DseMqs2sNwgt0p\nQnKLOC+vS3QnX0agjZAXnoZqhnF6j3kzzHW9R/1MczfBX64QStiQyntyFSPX\nv52By0Q6YSBjRIJ4z/4xPk2RJWipJowr8xdVQsJcZ+SB9kp9UgP5n5WnDE8z\nJj9d\r\n=RskZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERRtPsPSEJpCZVS6XF022FLAx0cPozJ5XO67ZT1HeeTAiBjAfV/fGOsX+YvuKKt/bV/ivy+lXflxDrfW9AH28+3sA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.0d0a9267.0_1626458234933_0.1868662042239555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-button","version":"0.23.0-canary.d234ec3f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.d234ec3f.0","@material/mwc-ripple":"0.23.0-canary.d234ec3f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6bWG//r8h0FYMnJOrJqtTq9/RamVG6CVJzXOIO/s6hR+ZQzEFyFZZPIK+YdZLKXiXFtk8x9InfZ+EBs02KFrcQ==","shasum":"a6742a9bb6397f51d77c991b197991ed60b89bf6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.d234ec3f.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8crzCRA9TVsSAnZWagAAi98QAIE8j9NWtOyW3nmZM/cW\nmWk368Z0QBi5qaCCaQX78yE+xZkOu9ioKZOWT5PaN0TP7WQN0d2t5K+ZzPUU\n0SPTpo3nWhMfZWj/9A3ekI67W6u5qTYq8pUI2qSvEqdcETIOp/93k6ckaA4k\nxwS255Ul3w8mUOFPLGUMFoHo4Yr4/AD8NSGT11gZiM9gBXBJKZj5zcOhZA3v\nqg9IHKxlZiUOgs3fBk1rGFjwcaifk7JmqxhK0k22/GZ3du9QiHMGeFBFk7Ds\nmt4NGlha7gxUFwq/MebkHQaVoel7xmDszPnFlEs6AjKC5S52sPJrf5nW9fIm\nAeksl9OKGKzEpi0lCMobZMYWSf8JtXfbjNDJ8E9EK6Yd8f1wVCL4l1dk3a0v\ns5mx09RezSZ71jCLBt/vvzukdfm0ov4F4JIR705AOR1e30EzlyRbo3rLU6PA\nIi9NJqOQbWxyqup31zLiZb0V8xsjUCNEB/dyC+li5GYHR5y/aM8/68DNlFEA\n/46tO1JFEPsfE45k9R24d5vw4MCwR/u9voGYXArgozsjRtxSMcS5uOBRQRHv\nA5NJZzVf/nk6ETxm7w9k1g7/B8G6lea+RfAYy4wPhNU4T4AxI5Mqgs4t3AEZ\nzvyeQ7fDspPff9RShZQC+PUn5oyKNt+m8Nn+Nv3PxZk0iBkNlsdMgRh1l6Q8\n8mbg\r\n=2xCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWa/6XBjpaVLB8+aRKoBSk8wZC4tTc2KPuLQrrFQy5twIhANZ0t0VAnGLLeWmF8MHC4xLpPFriVlRAWXr9R0PXIscV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.d234ec3f.0_1626458867529_0.7009492809205153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-button","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.5cd4bcdb.0","@material/mwc-ripple":"0.23.0-canary.5cd4bcdb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.9f68a932e.0","@material/elevation":"=12.0.0-canary.9f68a932e.0","@material/ripple":"=12.0.0-canary.9f68a932e.0","@material/shape":"=12.0.0-canary.9f68a932e.0","@material/theme":"=12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kXImtwfA2Jt8SCNkBg/N3AqWtnhtcCkesPI2KPxdJ7hyEib4l32bin/Fz/ZYSEnDZfP5A7D0EuIVEYQEkR7upw==","shasum":"983322240c3de62c75f08e2294afbd2cb276ac1b","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fYnCRA9TVsSAnZWagAAxBwP/33CzOTgeuVBG0GFQ8xU\nVHJxs7ei6yATFtRSbykKsRTGoLc+VDnRsGAJBXixKRzhF43hATuxkokNAq9+\nsekY/oE1s/cV8vYLaaxLKWiMMvF0urUO3p0dVhJv76OJlwTPlutLeBx+TQ8G\nusKY6PImfnWgR6HHkG9n3bd+ECTqNsIAORinV7Lan1BerRiiBUaB+EuEaL9w\nG4zCiZFrvc6ro/Az+z1JtO5i1ZXGext9z9oqGqKKTMf3tLIHDcYHxY/eF5xe\nTzGNQTLqutCajIZI1BbScQj8Nais/xszC3wdmQ4P3Nzb2zbbcCwlbQkO52U0\nQ1rRTZv8lDg0FL2V9l8gTh39wIkNiTAyrFIjeWy6JM8HcDZ2+je9uYa0zUdZ\nHpPmUGCkshyzu3XQsd0loU0FGOj+4538WPdzvllqvfHOzubmLb4422w7eX/J\nmMcpgr5YGeCWNS8ILh8ot3+ElxMW0H6PI/Zrlfv9K+5pkuaTBD7uz17VK3pO\nYbn9RgVJjPshL+4FpPauvtxbsWmF3L32T3Ync5baRcR+C/YRAlYbaqfGQWVb\nkubF59rwvrujjpqo0J16jBPxSDY6NDkMgqNfPch5exSNWMD3phGVJzhK/AaS\nT7pgKRtYGLU/CMSAZhrRqh+W+LqQVC7KXh+1dnTawfmQd2ucQQntp1ch2hn2\nHuAf\r\n=D06n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOCV5X6z0OIG2ELSzwRZ+KZY7pqbUhb2t6qnqHq0eRzAiEA722dztW13pys9i48T/L9pDvj1S/K29GbQ6D+0Ku6NVo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.5cd4bcdb.0_1626469926885_0.0597046992309378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-button","version":"0.23.0-canary.2b133cb2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.2b133cb2.0","@material/mwc-ripple":"0.23.0-canary.2b133cb2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v0XiRN+wVNikQRnSnCj3sVvX8b56X9+9yuCN6HGt7yrQl5XBfnT23AVc0p/cOQah1kMuajaTAhTnewQsvHsuPg==","shasum":"0c68c66473750e7469540e8045ff9dda05f5db87","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.2b133cb2.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gLsCRA9TVsSAnZWagAA/v8P/R3dYgchBlnDRKY+gysF\n9Oq+QgKfOHgBRDH8z4PPoETGgiJS/V8eMiZAvstjTbv852Q0jeb7TqfdaHVb\nQKXUAPVjZcvQvPeHO/3jAmaEUM8CRUkb0w/6sQJQIa7iR7QkcVzVxu8X+Njw\nOogUTtONt1A+afT2lTgJK3oqEHKO8ywkIoGGzhp132ryrBkMKmXuoU+TquQ8\nHc/yknjbQVOI1NMuABVPJxZ4rbG5g2eLAfz87HBAKZOtvTWL3opRsXEiiSjP\n73DIiYeorKZFMrJJyJg0pQwCfHAL6J/2wG86Yv3Cd6JHxCuElBcRnLUjP2ds\nVLxqi1CRsbquZzI0gF0fx+/eY3pgFw6T2QK+6XITLhYrH8ox8V1KyiSResp+\nKJk/bR7OpKly7/WGxyp1G278UjUP0xtJHInUz4WEvXxINW2sAQTfhL95oqFx\nLwjXdo3mpBq434Wz86o8VrixKzmbioBPflrQBgJHXGsZoBourKSJcXJvXeMB\n0g+XHQswNzMO2O6yUb0KMGTy5WNuVAYqxgFI4C235VLUl5P6duB0NZ3Myoe3\ny6WSXM/EWUiUy/KzRa465YzHsNuQkLBVueljCoglUibwHLVoMo1TOBds3C/U\nWL/pm37hqdE+TkS+IZe0i+GkL0qVZENIvFJgiTliLtx651uPvG0O87bQ6L+i\nNJKp\r\n=bZ7H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN/0Q1bNgDcnQ7eXZtBMvOL3xPoAk3fu8pk3xT/QUptgIgE9BVbyXniB3PG0FF7tcPi2Vafrd3zLL1ry9JTCNlgYE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.2b133cb2.0_1626473196399_0.3460483067764284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-button","version":"0.23.0-canary.ae4f422b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.ae4f422b.0","@material/mwc-ripple":"0.23.0-canary.ae4f422b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ucfXFIM19YK164lsbirVX5sX/AJ6LlkWlTdfR8cg8tsdjqcHGu1GrQndyr9yHTAgWWbY6OM3CltOUgM5xzJbuQ==","shasum":"69d49fdcf2ec4e427575fd869aac9c1d40ffdbfa","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.ae4f422b.0.tgz","fileCount":20,"unpackedSize":79145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwcCRA9TVsSAnZWagAAawoP/isZMjZ8KgRkTCBqRo49\n3rP3dEqSFN4/JrpwSrRrXDFNmWKC8bFmJk0I/llVM+iuGLVdA3XvHGqlK3Bt\noOGlETn3FY2GO5Q9/CMS1PcySpdEMk8Zlr3+z9v8lLu7Ix2mHnWBle6b/qqS\nXXvbUF8hp185xWAj9iBRDkv8eq/E40hjo5uXuWu+EQy84i2KluQj09UG+Dpd\nrglmXhkpfDqp1+uOrZBIYbSGFggrg/x28w6H1mjflWSYopiSWs0udysaqV5/\nVy9C04AE56PxehNEAK+aCckabX6pLCDCR+BGv0iZBmdc/KQQkLpC7GGSerCV\nr6qeRQrzHHUYYQ8J1wn6wPRIp+HTy93eYAmNVkAGYdzAunBg4mHupn9lYjJu\nFYiAfd0JPitgTarD1XhM9kF/oqKFB6spM3A8MYlC5A1DSob56zlcorYXjNbe\ngTq9w1Z+RTIG3Y4vRI74x6AKHfaWDvIujfGjV4uOOgqWM4a3jFsNs0htP7Ty\nwaUrh7SdWuVZrv7+sMYS5mIKOX5tbqgII8wOlBPNqfKc5dSoXQc92yObqaiT\nDF8Q36Op/3+Ja3TTnliA8u5+425pwAP9VsX2rrCriYO1ild9bf/xVwSB3jyi\nhMrTIrBjWuzUW1onKEY1dwEBDDW51mSguk2Iz5Z4fBB4YEJp9oQkDdyRpqyx\nHcyr\r\n=fBZ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA7hhWp1gwUjJz5WTG/SiwstmET7tqxebBC2tYZ9Y/sFAiB9QKCAy0B34gYCSUEyy7/wYEietlJDt4hbtefXSxdn2A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.ae4f422b.0_1626479644622_0.043889830986227896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-button","version":"0.23.0-canary.90ff8057.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.90ff8057.0","@material/mwc-ripple":"0.23.0-canary.90ff8057.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YV5S07VO28UZvtq/oDE2MLK/D6eyva7O7SY/fu/dWcap3O1+ZhAxRS/XjUKcXU8bhLFeL4GUOoX47PBFeYgb2Q==","shasum":"fc4f7a7046a0936372481a35d4a22aa16f2765fb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.90ff8057.0.tgz","fileCount":20,"unpackedSize":80318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YcmCRA9TVsSAnZWagAAwvsP/29VH0v0dtA6g4Icl+97\nbJbV/PFxDYiYu3vRvTwCTXUsV4z5Ss2749sCbMwXW080iBkQI2XYkEiWVISu\nBKm9hz0pWV9lynDDcUbfK9i0+r5QEaz/ur2Tw1uLtff1whOpJ7CmiydWoll+\nQxjAhoP3XNn9hWPsrzFN1YKDx9ovMTj8nnhfIg1BVLBfCRUTRpQp0hVx1nCY\ncGmTO14hb9VLiixDi+MkPyMFsIV9+XxgWGsRc01sQpY6CcODbxIaYTk8WF7c\nxStm0qM1vfN0qO48+3/5akBHEbUbQtaHKvuepYTeu65/3Wq9eCQB3Vcc28rQ\nJFEiSosrsAYZUcrzktyB2pAqwThS66Z9+lW/8fXdVsQc5z4Petu8znWH4Bnc\n0WelPA2q1nJp5Bk9p1Wl2vXrRaJ2HBF8EOjJAm2Z/U4RULLL07pCHYy1vysm\n7RDHCjM03gqCI0HqR51pnuGlSENJPHvUn5rPpjmXmmZJSOFBCgijgnq56glO\n90D7sruQUazqppPECfU9C3OOE7Wb29JIjC8Ijph+USkoJt3DH27KSMmDXmRS\nhuSuEX3Vp9ucg5LidqxTMJMIbckMPP6zdGqdRk4c+EObG6w6sSY1FGCPYI+R\ndyh2OBxXt65JTTlPLfVtgvBExyiftrqWndEPmJgpiBn83PWDqm0vHAofujuS\nTAzY\r\n=4tJ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHeNCChywb1QZlARPszzkx2uNzIZoyUdgGHzg2JfAWZAIgVwiWnR6MkUg9HTBTntehMttBxCIJ6vzKjHzcXE5f/TI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.90ff8057.0_1626703653936_0.887430223963934"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-button","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.dd7b75d1.0","@material/mwc-ripple":"0.23.0-canary.dd7b75d1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.4d95812f9.0","@material/elevation":"=12.0.0-canary.4d95812f9.0","@material/ripple":"=12.0.0-canary.4d95812f9.0","@material/shape":"=12.0.0-canary.4d95812f9.0","@material/theme":"=12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f4yRWJJ1HpFEJ7W2aekBwaAM8SM6P8ifIjOhxSiWA4vPYLJD5xplSKwaN19PE6DWxnrs3g/pe1zrWX+79p91bg==","shasum":"e51fc4f9a518c44567805b0027f7ac550bd3b719","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.dd7b75d1.0.tgz","fileCount":20,"unpackedSize":80318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9btzCRA9TVsSAnZWagAAHvEP/026xEtl7NuN5OKiNVq0\n6I6L//weQKPv5mzn8Op4aYGBSsH6oP6kaa50oWSzBCbcJ0BPKd5uYAy06JYk\nA11rJOGCrczisw44NvKqBCn/hY6kUMiJDSZWyuGrXzLZg4OZDKIqu+d8rrIe\nBhBjJSHx54LOpz6bxtbQN1tTAVmqVrFBTa8p8EybG0k8alaRmiFK4FVy1Pdc\nvGMKizxxU41jZtOw5Jd3J7bPgasDSL3fQdEt+puqkqKRDHxewJrKLOP8vi2x\nClct2HgDHFFFXDYo5FUInD2RJIdqAfYdy+BwsUQES9Zcic/JtQoV2bWmDEAU\n1hjcdGar+7U8JWbz0UunOazpZHys/+kET9/5MDoAMn/X4UiNKIOEgYNrK3Rz\nHUkeUOaWCSfIMgjPMk+P9xQixZ3X0zMd3ZcN90BzAqGcT/uPuIO1D66LA/vv\ng3ONOowhU8GEDR8+SXpExhWOBFZT9Ay78DBl6227xb6zb4QfxiBIc8vPJhdo\nz2CumICbQWAybVE5fiSojOlTfNgZ3+NWfoNK+DRKOoWj702iE1Y79kMNKYrq\n00Me3aMavnr00H40j/FpVLdmXoHYq4cOC4otnem+j+xzDc6dGdaU/OyOFbaK\nEfdd85vnDYpzdxr3sW1qUyYLv+5z67bzjlJ2LSxxyGPFERqqxZ7euMlRWagZ\nXbeJ\r\n=aY3/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2w4XtKZiPdyRV/1OYl3LiQGXzQzUBhv+VPn91tHgWTAiEAgatcHaP+s/bzzAVtLS2ZBxFE9po+n5Fxf1dshbYOhHQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.dd7b75d1.0_1626717043047_0.5724442377576111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-button","version":"0.23.0-canary.104debd5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.104debd5.0","@material/mwc-ripple":"0.23.0-canary.104debd5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.38d1846cc.0","@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b/K8kgL/kKk0h1BjaAfNM7fghAwaWWlsindwpYRVs3PXDC3oedkQtxn0KXysW/QG+mLzpVQsP/ZFAwTQ82iMyQ==","shasum":"e49fb7b9251dcc6d5516adf440844d8b4638e562","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.104debd5.0.tgz","fileCount":20,"unpackedSize":80318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gJwCRA9TVsSAnZWagAAudUQAJk08cyT4eyJunOREAq6\nn+Pdhglc5X0ju18LPMpTRlat5GAINq4PQdV2GwfIa8PWCH9fvXxnYTUaKhBJ\nRlHVqCQITwHZR/8Skh70BsCNpcZJduioT7RLpyuK1hE0Tbo001qfjUph5Hrn\nQ9kjmQPGtUE1zRGkuny1/MaGycbtkYHDsmLrMhEhOUw/f96IrbVqxTXvSt9a\nh/4s36Y78ripkUSVnljQBxIvhyoLzXeOlfAl7nLJ40KFSHon7CUiypE1LFGp\nww7QtsEn2HVAsWCBjeV5NJjhzpZsj+q5ttG19LOHK9Z+d2iXuBrU/WB+vVGZ\n3EDgCR6NZQmKkmTS/0LeLwSZH0UAFcsWkkk6mIcABz32VyH3rwN6xSWcp+ra\nE6nMYUGXE2V/LGe1X1/gHj8SIrpmiQlQO+WGPe8250TpyV0vhavC0D3lTeU0\nsfMEfzeTxEFnUwyQWHnNdiq6Lf1Y24tJIIfZe/AtuCWKzMMAQJhjmf32MzWO\nEYuyHLP0kas4JZHgVX6q8EGNMRq+AMRh7s/P9s3d+eYo7UMNJ2gh9Fcwg1g2\n+f3BDDlhhO0b1Nho7pBI1BNjcF+GFn1SJuf9AkY8FJ3JFYXG/YRt+4gMevM4\nRE7GSGUBJiyjSreP9WMtcptXiKoztZ+n3EEYmW4qCLhZdS2fM7sviLWn9f99\nU0yo\r\n=Lew8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2uapRH7ptOsG8LMIEQZ+uMz/W38kbczVRNR9XGoFfNAiApSkeAJ9pqKChKGNAnrequQCmBJNVy8gdC6RbkD0sqqQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.104debd5.0_1626735216262_0.586670646264281"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-button","version":"0.23.0-canary.4612705d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.4612705d.0","@material/mwc-ripple":"0.23.0-canary.4612705d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.38d1846cc.0","@material/elevation":"=12.0.0-canary.38d1846cc.0","@material/ripple":"=12.0.0-canary.38d1846cc.0","@material/shape":"=12.0.0-canary.38d1846cc.0","@material/theme":"=12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VieH2uxtc8Ks6DWimPQZEsfq/eRpNDz5dfyaFmVMsu+IPzYstKuiKgE4iKF9vJjO/QzZVEoIGW1Jc9N+AU7tVQ==","shasum":"5b1590d4ceb78d5a58872c53316c12aca7112c85","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.4612705d.0.tgz","fileCount":20,"unpackedSize":80318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQZCRA9TVsSAnZWagAAPc0QAJ69CyL0f8jl0mZutMB1\nigN84O06rQlSZ4geXBzRQmV0XN7dI+zWHVO1QQ1uQ7XigN6mHnwIALK3ZZq8\n04PjHxsoxn49cHIai46af5yO9szdyMnWTiqL0clFejH4RY2H37bx/cwPGuDK\n4i6iX05uRGJ73mI3ASgTgRT42fvFmT5Fzs4aV93tD2tbNlc/UwljTruJWH2G\nJ9gK6AnBnkqOc7yic8ZV6z3/zjHWVgYdg9laqT2eT90ajp2ucIwGVoydJKFu\nGpq96VHTqRY0nL7eUtF0bYYiOUTgUPVlhxTJEcpmeoFjrT8mq25z4e2lIWDi\nJhYF/ObzULa5PjzFAbwcaCfgn/fvW/VxG5bjB15gx9KBKtm0+xO4jd1vsS9M\nJp31Q6HoTSlc8bLT2bLzbmq4rtrRuvlwXM0ZqRyjoJiut9ifOug3xNMefdkp\nvu7p0fhTw/jK2XTlPN45K+ubsdKwY6tG4heni5RjlHyU6dIr7OSaLiNnqp5X\nC30S8/Vzz2OHTzoGyQ9fjPwQdO9+e7Pi5nJrLUh981DL1zmrskHNI8ZOP9Ly\nW+jrqDFAccu1StRfiHRDGoNiAPTnQZDEyG+TLG2Pj+1nUu7bbtxgsCQNOous\n5XCJVXsCRT83qIaVnHiPj8TTiGkgvsNpyLvQfDoyI6nEH8SfY2pzttGMwHkI\nj5dC\r\n=1xIN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlv2lfKqHBpYx8Sb4a9P6YJuFeu53jDzYuptlmkTpP3AiAkEvy78Py8p/pBAP9f4Qy/N5EPc7B/TnqpNqj8eCHUmw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.4612705d.0_1626797081162_0.22891185022527805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-button","version":"0.23.0-canary.b36502a2.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.b36502a2.0","@material/mwc-ripple":"0.23.0-canary.b36502a2.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.6b0442278.0","@material/elevation":"=12.0.0-canary.6b0442278.0","@material/ripple":"=12.0.0-canary.6b0442278.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-buZR1luRqPy5wbULe+NcXlctFe9qEx+3Rn1XxBzSgdhQABuvrOY8fHfNX+UX04XNjyz+E9QX60goF0Y63Niszg==","shasum":"fee98d68c428f73e2a757ef7ce4da8ca09b4c496","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.b36502a2.0.tgz","fileCount":20,"unpackedSize":80972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KD+CRA9TVsSAnZWagAAenAP/3Eri/OK1bVs5UvvQZ7s\n48AH/oaNmnUsVyFJBaPQha35NtcfBjTCt7QM9WBqzJuyC8W/qYx/kpwUdv6B\nENhG4/eTZb58fDJ1dChkwGxG6Eg8WW+Ue0RpCWNl0WIsD0Oioe85EXiX2EPe\n9PcOc6DOxIO6a5tcCv/hAA3WWTIAMDrn4KL6vGHlfMYc0i5pbHHPKvx67plU\nIzX64mGRHlmzuglkkLOibWIE4FlyB8K9fL1xPqNKvzbRfVCdamoy89c9FCKY\ntv4b1QiMA8ULG8WAK6Vdp/70+DCN9F8j0z+Hn4rk/gdL8amVUnMe9RAzDV+7\nRgVg5E6SaXp7RjEZ6Av7NPkv0taANqQxLasSKqCX5wuDpHrRLAgvMm/4/j/D\nt+ZrHouUf3OrPDBinwIyt6KHULxkltsLLCO46MxVt7jdkmNgdqjDr1xzl902\n97moyrPPtE3nZY/gQnwCVLs3XAFHhW8JQpj/sOXL9xGa1MUtQQxvPmFF6aHO\nF0+aQaia3m2PzT5eEVQ2xX70zoakvG4UjeqxqV+mTx6mZHy69GkVEcsKFC6t\nvg5ZV+Fvjiu6aqK26REvM3Nx8U8DdrToACgooS5Y5nnTRQAA+Fs0ImcMUbqv\nVPX7nqkU5vVDK6q5FCHn4mpWWXEyFmFwk8qPmKFEkJ6j5PM5Sed8nRVdPcoK\nD7pS\r\n=ix/i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMHlHTEFI86allbbbcksWUl9WQbkH0373o7j+SWn7OAwIhAKCFqno9Eb7VL9TDtIsod0nkFJCi4yOfnSgOabHkd6VB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.b36502a2.0_1626906877952_0.10802539492691898"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-button","version":"0.23.0-canary.2c392ab3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.2c392ab3.0","@material/mwc-ripple":"0.23.0-canary.2c392ab3.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.6b0442278.0","@material/elevation":"=12.0.0-canary.6b0442278.0","@material/ripple":"=12.0.0-canary.6b0442278.0","@material/shape":"=12.0.0-canary.6b0442278.0","@material/theme":"=12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yb9IcOttJhZxUPIlmUvrRjEglGI9MgneL9ahSrGotGS+ic2oF0lGY+A5G3jA0z5gvpBTSQzY4E/p42mhJcQoNA==","shasum":"264d68f77cd69f95924c6c9bebefd5ea15e99d03","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.2c392ab3.0.tgz","fileCount":20,"unpackedSize":80972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZICRA9TVsSAnZWagAApG4P/AyOMS2oKsXcCqtyzsY7\nUTECC77lbjrk43tYSZL13dVIuoFvuT3lKg+ejovHHtpyI1ukJz46k66RuKLG\nOZT3CanjiS6DK9yVNKNRDOPkcei2RQPJq/BD9NXktRHpQZUG6uKsVZTYTkQG\ncC+fvBXXgTReoAuTGAW2T6i9VeQE8Ao+euRE1uQ7sd6PU9UPS0DL5HRGSZ+w\n4LO0aRCiMK5+/SVjQnEwnsSntCK9biRFjpEwQJxAcqLO9cYZbekVx7NTmSNm\nQwgg/mWUInOWy7H/T+/NB/nmXFPaYUxQ01QO8YHHN1O5rV1l6UM1AST9UZKP\neBlSiePH+0/p6LLzo80SjR2dsKOUo4zvcUD2O90efYNXHIo+cvkJYe0FMmPk\nxhkC62esZtdx7hJ4J1ig8/OhOL+K0BAYkIIElD5ZcXp3hXX+1mi9kfNCIObL\n07bIvWwCfBOEem9uoGHilqhzDt2cxr/cU3MMF94NxfCChwG4m4hyIfnpzVjq\nxGj/8CAFoCh0aT9HWerFbLCl2PfIm514TnnrhGsNk+qoDSvXdsq1I5xICNKv\na62Ku/uALy90AgVA3jpxa172ggFs7iGZYqZqVMB54IYOV8FpydAkUEwv5gTZ\nPf3fVsInXWR46arxr9ih2WnaAwLbPjPh/KNX45FoJoHVE1hkoFf/bU2QPR+v\nFbC6\r\n=ObFz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/Funu+kWqpFyrKKABiT4PQVMYV7oC9ebhiNRn2mS9CAiEAjgJxYA/TaFG49IR/yDux3itqRE4l8frNNfeEn1ZSGms="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.2c392ab3.0_1626965576642_0.8526539729147129"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-button","version":"0.23.0-canary.e8bac95a.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.e8bac95a.0","@material/mwc-ripple":"0.23.0-canary.e8bac95a.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.5f00e454a.0","@material/elevation":"=12.0.0-canary.5f00e454a.0","@material/ripple":"=12.0.0-canary.5f00e454a.0","@material/shape":"=12.0.0-canary.5f00e454a.0","@material/theme":"=12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7AotWhz/IyB5YDlITIhufBAHpH6I4WUr5oPH6D6dPZ4amMzju3Tl7ryOfxSdoKQK3+QA41b6mn+a6yiUix2+kw==","shasum":"e38b5cfb92edb16968da6cf131faf1686a35f027","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.e8bac95a.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6ICRA9TVsSAnZWagAAQoIQAJ7BAAXK1UfkhiubGCGb\nKap+cQcQuFuoivESRZWIpVpNHyKspPTy58nArsYdDl3opGyH1tzcRhePJ3kK\nPJCT6qPelN7kJ/p98I4pHbrNGN5pNQ97Xt4YdsuQLXloE4hHxIa2GTGkJyWn\nyt10ZrZdSzVEQIn1LVwarpaG7HMNWshUJfjZ94I3nd3PEPkcNv9p0Pbnyzr5\n5gn4ZFKkGNSv06GD2zC0mbW/hxGsoMWCjYfcwBgpI6pY4lgm/JrVZEib5DbW\nYIcNTK+Av8bccdO6GrGT1SXFLPTQfPECtlvfWZ9nlQtvzUDAOD7Fpq1RxU2E\nSMsBDXv9xx0zi2YBPth7nE/f8wGVgSfKVV/Aiss44uOHsu69beY4lbIJN9I0\nFsgvYTGyAfuBT7QsX6Pnt3XJamPyuXlk9LAX7HBU5bSqYxedSWuqDKrtPLPL\n55jcYLfR+joheFK5mQijTh2PyNQKz2F1W8k0tXK6ThPavVjn0/uUFkI/Uu6t\n6nBV/SyfqRuBaPibdwyrqs453Vaanam8UavumU70QkCAzm6wgsG2oSWFzSHI\n0s3M/rMcyAAtz+F8n4OZmhERjZdfFONfNLI+PQEoN6XXh7vh//x/3VVvRJa4\nWkBN8GoZhun19vHJHY0dLyezveZwN+QU0mbv97T2VMbrW02Ukunuh+r2VW5y\nO1TF\r\n=PbY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH12uNu5FSxQRPp/iSi18FAR2xunP7kDUaI8uPgz2MpwCIAnlamwpzq4HQrdAxfG8M9g+91rlNHT+byNBpE+8HP6J"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.e8bac95a.0_1626979976056_0.6831451076939754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-button","version":"0.23.0-canary.38f29f8f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.38f29f8f.0","@material/mwc-ripple":"0.23.0-canary.38f29f8f.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Culmf/2vqJqneV9ZcJQ+3Gl2Di0rZnN1JwYsEabIZke+XaM0b+5N36Iiua/6smmYRK1O2hWqTnXIanY0oVGmtg==","shasum":"2d892ddbb65f41a696a3ef2abd900b89af2ade83","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.38f29f8f.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wdjCRA9TVsSAnZWagAA0cAP/0v3HjRyV5Mylmr/VqvG\nSAvVqKOX8h8eVucS6WPf1onMRX41ciDWY8rpldjfGSdZsechMbpN3JQyJ5JR\nUpnQZDK4Nv9jXuy0SdQGQYSSap8vpiUs0J1ATVM/tXJV79TJPbG0FU+4hyg7\nNH8lhkJPu6cIQ2Zdrk/BGCFkP5Px6L295CKZGqbnrdr5CCGrF1ylN2eqgqGM\nOhqnBugnxjFXMX20zlrtcnhiqreZABvy19qlNuiy+Nxn9BlNwXhkVjO9W5zs\nfRAIvWxU/4KUVqWOfHEN6SuenJ8kxbsuukd6LcvhT2LUIWbmOolA02DmDY3a\nXqzRGww5hMsUTlngAVcmkg946bGFBu4EYkGr384I7Xe7BTnhfKCkPZSYJtKf\nrCCICFJF85zxxhD5UwXjp5+vb+mVl04Wgmv4lexabqD3/Aw2Yxrm51PC3qRw\n+8ZGxrZcMoJHq/3mmqm9MtoIdqaaBAanE5dlM6vaIYnOmv0ii2mFTJS8/1Uj\nWCa+S3Kd29Tklrqc4CGEamOTHtSma2GxO82shp4Qp2F0S6mpqBgD36yUoIKH\nD4uYFua7Rz+gGc9yKYBNo9rGOBWLEg6NmXrU0EMhK+AaeGymTkOWWflVFXH0\ncsDes8OluQpvjPDgC+mfGaDoU33jZ3zG2CEyvgev/R4dcr1kppndeJQiPtxi\nq+rJ\r\n=BCrY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSwL4ArXST59+Y0m2frSHodJfjbe+Cbd40ccsq9gBq+QIhAN80OwOxgGqce6IRSkziuyQ1P7nqzIiULl1pVI5cwJTH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.38f29f8f.0_1627064163667_0.9930642637522922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-button","version":"0.23.0-canary.e0693475.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.e0693475.0","@material/mwc-ripple":"0.23.0-canary.e0693475.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mMUyqNojxv+FMxD3tU7+2yS290XaYyfu1q5vo0yWLlQbJ7DSpR7MYIV7Am4T9BSsAfIuyxyVe1MvEuOHuNoWtA==","shasum":"6b8b69ddedcafccc91560db7dfde5bf24ab9a9dc","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.e0693475.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDMCRA9TVsSAnZWagAAj5gP/0jnMfmI1Nn7a6Bj2Yi+\no22mJknaUjnKD3Y5w3s+MsNFFzvCYChf+y8y1uMngdrFoO3hKNrdYRFXCX9P\nDLeTKANPYKvvld/QtVz5Enw9zy9naiSf7UrIpDbGMl0APKex0e/Wyv/7uqrX\nR8slVeegAnlz8sEMFKr4pmIHPClIxGlsf3kqte+SYpnRaIVALA82cqRqCxQk\noXjqRYi4IcfMNV033kR7IB0nsdC3WLtdIUMdqoQjlzVgTU9MlOVTu7EpITPl\nyzIehCkZCYF2Ebm3Dh8i2y32wBnS2FlkZhQfAvZZqqUaQvHAelIUjTw5Yc8L\n2OaouUnfWpV4c69COJiUK0/Au70K3VWfQ3hLGVxr4QRhHfLlS25Kwli1FdXY\nKYYozwef9MRBTj5cDMnc3xKj69eagcoRyNl22Y016MQQwME2I5Ca+xj3T7zv\n5xM1nMiTwjmR/2hL6CBp2ke1r/MO2il2Q6e7aNY5pKYvoMlL34vvKa48Czho\nJctlWO/1nZXImiBMeQHpS/XHI+Uidnl0OnPXydreSrx4rrWauaQZTVj0pqt1\n436uYCYImehvabvR/JQLowFsRoKWCNvp7VoObg3xeM1TeviqdA2i8y8JQXuy\nov+SPhRjHB4I7MAnsfo8U0ovbUvJ37X6h0rNwDlj854kkxuRsbsth2LKda9g\n2cUv\r\n=V2Ow\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5EpzEKd3qOL6ljBivY1gf7UiuhRJYw9PCM8Xk6yeVygIhAOIufO0znqRswhettXgAqggIVUNNlcAufBdBHTXOxm6t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.e0693475.0_1627066572334_0.03339461525517695"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-button","version":"0.23.0-canary.d595e030.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.d595e030.0","@material/mwc-ripple":"0.23.0-canary.d595e030.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.90e08fc6b.0","@material/elevation":"=12.0.0-canary.90e08fc6b.0","@material/ripple":"=12.0.0-canary.90e08fc6b.0","@material/shape":"=12.0.0-canary.90e08fc6b.0","@material/theme":"=12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QeKPj7jDJ17YBiF89iDfhKLwQrF7/UC7gjOgV7gh3R4y555HkmZ4DJn2g1x1QiIEEMW2xx9UByiWVJQlQWwzIA==","shasum":"0cd34fa34410dbe0990a3075adcba28b0eb44bbe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.d595e030.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yw7CRA9TVsSAnZWagAADpsQAI3TJZN6Qh8CtJn+OWU7\ntgtFN6SXe73EoWXfS3hGYrEv6m8vEV1sDE+lYBbOlBbjzhxBu5ELprRHrv7w\ndLLNlVMeo2Fo6ju4OnBIdK5WXNNh44+Q5lFt026RT9/FD++Kb2p8ZaP25csb\neubrZFf45w2vcj8AY7BtcZlJ985lIglqF97rP4QHinqyVVFaMIgsQsCKCRYY\nC5n/njyvlqImV2w7pn35mqRwgo6lpMCxAB6GQ0aQPuc+8aiMj5Tgz2IulrKc\ngX5zf8Z8ACq8FPaMBZeivLAvH/G2j9bUCO1t+H0zCLiA1HX92Jx7OO1ICk8U\nm/kNxnsQgpjBFr9mrU4yTaQuyiVBUOSCjIETaXeBosIBDKVhSHkf101j93zX\nKhpxiWrEGzlbr9ZWpUhFZpSQJ0TQoyi7g/L9EusPLBFHPi1L4uFLT1rApYnr\nfrEJ23yxjAhK53panE4UYRyLZul4Iq5oQjtUzHo3rdwNbnpiYF8Lr6D4Gk+x\n7TY5atu5nWxQ0M31Xuv8dW9wtmnEhSi1vaXTlueSiuiLukexlfT+SsFS3YLV\ndtIwZOy97qN0tEHxrJW1z+t4ieCz5pCRvpOrz7SBK886vVQHIsEHgyJvu1xo\nRAdq2D1nmMBNgGtv5/sWp5E+JbkjijzMytrfT5Bbe9/saGdn7fggkgfZOjfP\nrOUK\r\n=7ULs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDa2kgRClqfKe3BZsgTsqOI+ONVhE0YY+EoHJChSukhMgIhANZ0njkS3d3bLU2xk5tkio4Ei41hiBob7YgWF2o/kLoU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.d595e030.0_1627073595146_0.12949875948454448"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-button","version":"0.23.0-canary.fe7cca31.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.fe7cca31.0","@material/mwc-ripple":"0.23.0-canary.fe7cca31.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4k/Sx6rXF8oDXfGJJ10rF17KiD3wf1rT51ETX3W6/vuVFXYTueqmbOhx57UndjZ5xkMxAfKuwlN6CnC+CFVHVA==","shasum":"92979fa34ddb176dbe472b99e5faf5c53c61ec5e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.fe7cca31.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zshCRA9TVsSAnZWagAAQ+MP/jcpJH1pMjdcaBEYS3VL\nenh5QWx0wT30VEt9zdUJVY51etL5Ru37yCnKzcQL3zLDADhCzWMivcefr+kq\neBrOc9s4lnMzdPS78FH7tUPNTXNUdaBjRS3gEtukB6Lgml71YHbnDrUBKPcQ\nk2VVXQWZLjynLu2lIedT+QofSJPcVybf07nlmx7IGmCMk1uq1PBgR1y7nHl4\nxRQb3jlSEzNishuZ8EAgzyTXftT/Ic34H6oiGlPVhpCk2tHdeek0PBxLB5UT\nGrIgY6JX9eXeFq0dJT6q1U0HeDiaoVoNHA07LP+/m35DgPj/dqdC3ZRUkh6b\nHAygQJEpVgWCuB2dOdsckT2QUE+g8Ibwvkt8ROlrs70XHs3oIOedbIbVPajx\nOfO8o34TVYmsHU1Q58zk7l0Q2bZmU0X2D2uIRkZlPpHXy1VMt8lxTq6tj045\n1m7Lk8/rEkWiXO5ob8qguH6Io5mmL+MYfMA8xycQ826dKwHU8hwDaSKAhzhi\nLRuwEM6kaEge/XH/JUYCiOv++dhPlyCvrq9YoSUX9qpzcOfq4722MnjFsc4J\nTlQOfKKnznSBBafPHebckT9nkthyItsA2PQTRMzUtLJs0dm9YI7lXOptkxNU\ngMFPib1RsVDHXWIDugvUCxcoyA+lFpTW8OYR2qJPiyCDvxrzlS4ddFbcFv97\nS0L7\r\n=vLF5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaE0nwxIcF5RH8yMqbZggi5MgreoZJjhhcO4Nw9ORS4AiBBkcn6LWxv6kpI4Na5CbDH0SKHs/uJrFJBXeWCW5iQsg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.fe7cca31.0_1627077409668_0.875347524144801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-button","version":"0.23.0-canary.fd9da483.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.fd9da483.0","@material/mwc-ripple":"0.23.0-canary.fd9da483.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uBdF5Auzh98/qewHAqEwfqQDY93csWzqM0Un2IG9eck9pV+Yl+UZh9ebXTcfXqkpeyQ8+Rwbs3xjvPDBI8GMkg==","shasum":"fadde7a9d56bca205be02fdaf4756d821f290e91","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.fd9da483.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/ygiCRA9TVsSAnZWagAAqYoP/0qBm82LjAipc1DSK1U7\n5Hlp/qXuZ9z8vhk/AxaoL/Iz2v6xaOKHzQrClw6oECsR8Sh4M6a6u+P4YGJU\ncLnxB9WhBVHgdTn4LC+5jt1bIVPFCnsfwggwGwl8MZMnukTCrP4676BslS70\n7WPX/FTbIrLrv+knMMIeAIZp8FmHa6BKST4CNxxUBG4Gt4JIiPS+xWVRh1fZ\nHOIu5N2bVgSFB2Ub1Tvee/fZjGq/NJ1gbs2d2vAFXJto8EtXKTM5XnnOetRf\nV7h2CcM0GUrmyUiIvk/KYzbk4waMTe5e8dShQjtaFIdjyWEh5BCAd+Z+RPyU\n+IfekNNiShkhwjFOaCqvEoGPi8WWbMH4aDndQVt91bI33wNMnGU2l98wMtqL\n6q/9r9MFpOclPsYkjdo0CgBtMpTwwkCJSzANlRIQKReHnEqGhsY1qejk9DUR\nSBqGqofC3C1DnwBDKKQT7REIq1Q7ojuqEa+HVil8TXELiarGsHypZv+wXrln\nMpLDXV4Nsu6MNZ1udjv0yJd0uamm0jyfzqKfunEE1qiAJVdxy+gx2c5LeWhD\nE5O7vzn7IXi+L/Gow+u2pPB/Qn3yjyiuLQqAFP6ZlFVgUuahtnbSYAT3U3y3\nILY0lRwrN2DLTIC5KuTtqRRYOgrEBAn1ycyJHrQ/24n0N5bSpvK1axm+ztT7\nh+bo\r\n=Qi1F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+K5Bx6H87PLsJksscSGXQ5Fi3NeIpLzpIhMjq2qSdAAIhAKWC6v8cdq7cHesL7mVkxlum2AGL0XHifwmQ3yZjySGD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.fd9da483.0_1627334690704_0.1871165133169601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-button","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.8a4c7e06.0","@material/mwc-ripple":"0.23.0-canary.8a4c7e06.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gAKkk/ET362a0HdrVLjQabhYNsi1FMLPLdCuR/T0L9dqS83Ol/3dZIqydzGhqG7sRya7PhO8obtriykoGROoqQ==","shasum":"85d77788d7f99d3d7edcfa86d4384aee7a848e23","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.8a4c7e06.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zq0CRA9TVsSAnZWagAA/0QQAJLnDGgZ+bXbsjX9u9V8\nYRCH4Ks/qxF+C1vl1h98AbzbDrAouYVxkPjBFKzpexnbBLOwjIugTu2vX7ph\n4C2ypHpmy70sFhPde7Afx6eHM1wKVUlbSNPm14jeH6PKPr8l5zM+ThZOkoG7\nMXni4ACjCnPxkH3fohpTvIeS+hNwy8+DNphjLOpZcWlnHs5cWCGWeLKZunlA\nyKaPtaR6w7YWK34bk3Tyw1KEvoLufpWv83J7nEg4bW0URInbL2X7tTTR+pOC\nQ/IrwRJcMmmPob0eKLICkMxgyqSfrjw9AG0S/Wdm4Kk25gf3Mc2Ck2ov68EJ\nhab6oOw1qpPN9e8Xt3dnvzdR6QU8HshuOlwbCkPAVaUS9MzBwkluC+0dtBhX\n/7GdCwRS0RS5xrz3VWGhYxAYPA6Di54IYg9PdHi+7lDthxrXeT8SKCDf4E8F\nsK/MiY4W5kz7IORNzdNsP5s88Xy2+B9wO8Uwin0rr+oSZnq2oTBmkya77idg\ntYJqkRAWKpCzsSQgLe9v8Xy5GUNU1cAmjKF9YdK2hVVoUOLKZEIRPllMhnRX\nARpthc2bGMvPpe1c0IdUoqpSghXyJeUMPlQx/IgFAeDmbBia0Fvni57l/h/4\nx6sj7RZcAcgFCuoGxZJOY5kkeCp7iBMSQpfBNsUF9JRmaYGM33u7octnwodu\n96zg\r\n=6sVx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICifygwDHEhJjdZN1vrssOJAYlhyPthzGuaD5KrdcpQAAiEAysQsyrs3CkFpK9YLO0VbFQkOHunJNOA9EmuCY4QLjcU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.8a4c7e06.0_1627339444259_0.6260212939782841"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-button","version":"0.23.0-canary.5b395fd1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.5b395fd1.0","@material/mwc-ripple":"0.23.0-canary.5b395fd1.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VcYm9s2jiWBD0c5GLrxMw6nl8Sj0pM2suOJWBaOf7bkuvChsPVs7Fxb5sQrlUg55SzKP/aiDyXNlkXSROpIejw==","shasum":"b29f7b330d586c4d1a80c215d4b72e7f1896ca66","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.5b395fd1.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5RCRA9TVsSAnZWagAAawcP/3wBwveuWV2yWooQcwPh\nlPB+NVMdoxL0vwNv5HJFvGBaLn7UcmQn95QoeNRLlG8lEj0qLIkVbI1Ipy6A\njGntXYnsA0gbuJRo0l6U7SQfBcCv/ca84inw0WhoZmzG/6PEHXuTPBNYOJxK\nKU4s26stOWonL/xHSFdkhEoYA1AyVDdljJBqzaP4MMMbn8b34WnvK8S+17ov\nGZfDNYaEwmb/J5HJ5Jha+WclXf/0TNiFgaAmP85HF+qm9SU4Rd66OeFaPRPa\nv/Ce2uv7qoRZHwI/tHLWJsqsSoKLXNSZDTxv7X+SXTgAVe53+WEHYT5lqTw9\n7Au8hYMaBO95tdNtj8BZ//uISciurdAxTxUlgX3eHBjCsxkaR1oFtJBfVuLd\nIx+UYq4m0yMJrCjNq2ATtWyjaesAHehSFscCmGrPY6b4VDz8rul4jhjfdbG9\nFv3xIa7s5k4S9U7vT2UI8FZ7+IE3b/DqQrGGUYAwlrxBhLY15oHC2VOuUYsw\n0dDdDYBnNWfbRy/bdZSoNyNbmLiwIHvOUcQupQJb4O0Sm+l18qBrv6YvmkUB\nskS+NV6sRpvIBnEb6m/smblOSeOkCBTHVNC+v3V7XP1QZVyK3eMWTpOiCIkd\nlqYNfOm5SpDsKgEikHwuuijJjSFbDzJuE6fSn2aETa2ox9M+++8SG++J7Q9J\ns2H0\r\n=HBqw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDKjsOj8sXK2Fs1bOg6Joymx1l9+CwP2+xUF1g/17inAIgeBeqZY3Z6CUkrN0lwHZAnCaEhlKrzVSMeNjWSEOvUJ0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.5b395fd1.0_1627426385814_0.8411663444523307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-button","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.e5efdcc0.0","@material/mwc-ripple":"0.23.0-canary.e5efdcc0.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=12.0.0-canary.3f36ac75c.0","@material/elevation":"=12.0.0-canary.3f36ac75c.0","@material/ripple":"=12.0.0-canary.3f36ac75c.0","@material/shape":"=12.0.0-canary.3f36ac75c.0","@material/theme":"=12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jTznMD4OMJkN4vL+o5P6WZMeuaaEb3Tjf5Rq9IVRYs2mYjLeQMQztN7cVKXlfHkTFx3RPJJUCMn5z8p+NP8SAA==","shasum":"7ce76aaf817733fcd185848d84009e8476278e94","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.e5efdcc0.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJQCRA9TVsSAnZWagAArhIQAIGcQjTUGVpUTHOzwfPx\n9jDTWzyNNNJDK3Yx/TliJDgLPKqdWr/Kvivpvzb9c4XzwFSXW3iGjzbs2pMb\nikfJJ8+NpK70adG+NOHyXgqKcRnKna318phn/NoidRmaC/zisd6hBWqGZfet\n5I4uN4T4ZOWJM87Lig9RTOz1r3U4qRf6iMqdE0l0FuO2j5op9ZYa3yf+ITfK\niFUdjSCzRQ8OQwFyU+y0GhqiAbjnZW9jLmg65bGeVefI+/Dtjf3KarsunTeZ\nge7K8JP7ZtZIAgWFGIDImDoOcHP+natuKgd7oEMTmaGFcOZS0dC2UOGYJKI0\nDbpQHTy/K+8Vpfijt9BWyaQGqaz9oThv8tJoPvNE01+KXUoXwKYQ3+KX1n/s\nTDoWVFhhorqVTTtAiA4jYWWHn95I4I+YZ2xSmwlq543b0M9wwUTCY2lPGUqP\nAxWDkuNX8o/8B5DcE7Epqdsd/QH8TtPUoOwDC099RizX4DiOuTEWssc5Kh49\nDD/ddZJZh2UEOL33igX44cT3DVNjHx3A4OQtynIUTdJBF4aFatAgqTYw2GWt\nXIYvFhI/aFBv74yARmVjWeR9JnihPnvnD2G/6dqgQc7xzzKD4kkxm8yTxXMS\nLMFDmTQlWp6A2ZC2ZimNri6V9i0esGukVoGipYPh6rxuqZCCU1dRao7iTJN9\n0JqR\r\n=dhQA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFluBofBDl59J5g9whuA94E///YJWHDcnALCKAaXW+KAiEA+FeK/+nDA+FHgOMYaWQ/W8+Eez5CkNPbD4vld85l5z8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.e5efdcc0.0_1627492944345_0.37984682048914276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-button","version":"0.23.0-canary.ab310900.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.ab310900.0","@material/mwc-ripple":"0.23.0-canary.ab310900.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0cDPH3V6fz3b/k6+Syl7tb+KDw3089dkcwNffeKjzhQ3rUiuBtEgcNDp+0KyA5sUHXmDjon5WUF/7KsjcwDQgQ==","shasum":"68c172649ce33acaa5b8ce70635ebd1999d32d10","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.ab310900.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxDCRA9TVsSAnZWagAAMFgP/0G9l4J0z4hmuuUew+Cu\nwyRjk0o4LPj6QT2c8K6BNFeTZJSGGDQsw9MGf8QRcK4H2I4L1TLysjCrq8GD\nnkP7zTESKGjdfnzcLGvkyBInccPZi0rtBt1euhGdqdg9mTI0fk1BzndE8fKs\n0VfQavziGpLW3OLDsQfiphAIVtSi3rUep2XGZaRkLsW8VfPq8g0I6tt/9s5f\nxRRCQAPhRT8wk3Uk0ddiCeJi1DNIgbPwMZPM9z4rZm9hI0jyjPtuRRCfLrAQ\ndbgTasFD8mcPwm1Kk39ieJm5fXyhWBGCC3OOWoDoKkHSnmKriQfqi0xHjt+U\nSljJxTxPJTemmfnsJ3OP1jvsad9dhPKbaaScv4jWAMURhwei+aYVYX1M/9Jn\nIciUPWSKjV82YK80hE3cWvwnp9R1OOtKTvvxudq2dJhT5ZDysi+EtpCmApfW\nzEWmbnXb057ekQHXSc60IQdc/qNApua3rWGqqSI8FgWKv34kz/8tJzxvMPv8\no1ocHmZKVsx5sJbUPlqkb6UIE98EPESdUCyPOfWroGaJ0Vs+8vakOGTHhzF4\nj4kLVB15JVo/gU9zQthReP/atw4iUGROVQy+BQe5PWx8IsVzAHx7Sdu3KK1O\nHkd6MFbLEkGBVzrbfEldmhORME2k4r20lvYqhCP7Y48in5n4UceRHphIqCWb\nKLox\r\n=t7mz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEEglRRmdytIqaZAR4yOg75iJV6s0zU7WLj2DWgD/LKAIhAJC1LAHp7EmMxZQU2dLSezVu/95vOEOrk00gWa7jZ59E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.ab310900.0_1627503682975_0.3627148424429909"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-button","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.21dc9bc5.0","@material/mwc-ripple":"0.23.0-canary.21dc9bc5.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rowTqRjriHRQ1AN8fJ8EGQEUX/KloHVaPtX4j5GgMsoCBzCslvC5U422Y4BesTkV3oWsqLcMDlj9+qwSZkyxfw==","shasum":"f784309c360c8a54f1f8e686a576b4fd85564d67","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.21dc9bc5.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb1fCRA9TVsSAnZWagAAHGoP/14jTWfrdVj1sAbozWbb\nrCdUBx6NSV0S16zKMcClIKa0mHcQw6faaLkuDTMWS5t0h4oUpqo4WYVgUTVx\nsErJty9jCKC4e+O/Dm0eDhf8n1b8SMgUvj4DJayAeoTzInQPGFstnb04E8IN\nsD6IpX7Jp01MjCDBPr3TD9sZ/FImGdcPYPGwL5KDisstjAQjaWhz8vQauktQ\nrsmYmYoUjkpbxxORUiYonS094Iu3/txt5ekgWrzF92eDVu4JNDpn45oDCFdO\ncp/nr8NjUsnO1SVAZGSsBoJEIexNmgZY2VNLbmKQIfrtyONlQTrfryKaeL0D\nagrbhrzgS2y5aSJznI5ia4xD7iEpyIDkQABNXQB3ODD/lgDxWzA39jVIMlL/\nNI4eCfZytBmLmV53Mn7R8IfwRc8W54fqm5nWsixxkGnqfjhf3RJZDWwwNbYy\nUkiV2DRYkkTPibqwaQvDZayPo7/awQOq2+7DEQFydiz7TQh1FMpO3/Za2uEM\nLUE6RaNBV/VAPYunNjgR9fGc4F5Fkh+XkSHk/YaDZFUD4IH/2qT0oERMRqso\n76Tlh5MlB4bZ0jMrxi6aVRmmdZ6kxW9oNMmKuQT8dXbxfW5FKhex4N8hQDcw\nav3yR7wEBZriXzJCh9Wico32h10iiObz58ZH1Bp+tDBXbLllE6glaC5TffMD\npRkX\r\n=Oa1C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiZTQ21xLloKNVN1accXN4JYM2wwBFoSsxHNSOeUiHRAIhAPRV9iMS6yhxCeAnKMSIBXRTNwWybBjFUiHZyBsRMfbF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.21dc9bc5.0_1627503966943_0.2748758088316203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-button","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.68c7fe5c.0","@material/mwc-ripple":"0.23.0-canary.68c7fe5c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-INbHQgaMKUPbctQ8vLXDXeKPZxe4BrSb/gIMZyYCa7eccmDi4T2u7dNG8Ru/BfbDJjI/qEl5oKbokXCadhvRmA==","shasum":"6f7ca25581e4b1035cce48d333f4f81a5fa98304","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.68c7fe5c.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQYCRA9TVsSAnZWagAA5P8P/1lcOKwFSgq2ecaaTGNY\npQsnOnHFeM6AwV/URkQgItSoV5PJQW1qPb1RIYuvn6q2UPIjjbNNuYxTvZWM\nrGOyQuTJg07R2cBr2FsDMQHDKFDpEIdOCWRGTb7vl8470F4an6OYddTITZce\nV37B7E23XABEG9l8C6l3n6kVJF925py1oX/FdCp2FY940cjRBtkGpgskU624\nhyPmjOrM5ARUua6QHqSwoKMPI5o1ez9bJOWmzLUouteRN3Z6lUzU38NMdov5\nbuFXm4JrCBHsM7lFPLcBsLLryal5Nkw/leGh+nzHAVLbInwjaj6/CIgVXFmi\nicTedcNrJyZahpLfrxgMk5F/Bu9ZNhUBnY8CgeGPieqNEOqP1nJ+YCxnteKt\nMj2FjrkC0hZC9AN1gjI51K6iuZGsljHkjeFJw4tpKIjE0lp2KmW66+ULJwmF\nf6+wlkDMeLgdnmjTr494q99wqgLpDhENkjgsU+iUOnrgjgKDmNq+IiU7+OOT\njnDUO5auBD2B4R0fhnJBKN2FkjuqkEWRPe+s1UlTm4qSWBvvdxbWwNJ9j8wx\nixrrdFH3L04ZYJwpNcsZq2++dszGKVCTWWdL+7D0StQAbceDxd9O3Qob23G9\nT4La8ZIVuW+LFf1jrB6sFAHLT7aOcdyHmnXI7YSn4bWCDqm23G4lLl4zUuv7\nm50p\r\n=LtUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6mGRlrIXDYdSuj3Rte71bI2+IILaqXDTzrdSQbWHHYQIgFNb3E3FqvPPExQCKAaPEBq5wONixRD/+xcTImykxPWk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.68c7fe5c.0_1627583512272_0.03817844644213664"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-button","version":"0.23.0-canary.aebe39e8.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.aebe39e8.0","@material/mwc-ripple":"0.23.0-canary.aebe39e8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.ae85f7eba.0","@material/elevation":"=13.0.0-canary.ae85f7eba.0","@material/ripple":"=13.0.0-canary.ae85f7eba.0","@material/shape":"=13.0.0-canary.ae85f7eba.0","@material/theme":"=13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-SmmcDnOaHvCqbH9U5lrJn9x/PrfMfNlEKfaytJs41v5DPSZ5MXKVMVBgHWGsZ6eHjgNPH/b2/Cw80bgRF1uLsg==","shasum":"2dd70e6a40b87c133a5a3ab7f0f7b9be897dcd15","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.aebe39e8.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE9qCRA9TVsSAnZWagAAgTwP/2czvaMk2W5FAkw7mOud\nFmOjzylgAhQOvfXJoYelBhesiBMYzi8/TK6mHLEGBDTBa6l8ZHrSAPdMSV9I\nxCweRtmpA2UKfWKkv7grllGvCYidOhdLlCncOSNehvUeJ8bKgP7grSEldL7y\nb+eR/l52nd3kWovidI8a6akrS3b3hL6E6JtipT6pSzsIlwxFomvhf5ZO/I4E\ns3C17nfgZgujcJIRwWWogE5CCmkTTjTVE9JPXpS0YWv60Chv6VtPxFW0VvOO\nxlJAevTZOpgl7+bCpq4u0kRfBGy3NUHEXQxSo8YYjopAvxsv1iCTqDI8d8/C\nwcD//duoG+KmO/JkV97A0BI35ubHjTE2tTPlGKYTeHffrj/0HPb1g1RmNrzE\nSZmbsRMWvpUKU2mbrzaZecJ3hiJmLr0IYpNNkwNRC2rav7cUTN/dQb0sWnZF\nrBmqZqIXeBK9cS0pLiit90iAsA15SoBEOXVJm3qKO4qO/XCXp9BpsObC2bWT\nE5sd3DJUdljOXt3i/WIXvLkbNBAp3Pn8LOaxgqT2OKtQLB79LPmQrlyxU54P\nHwz5Pv7Js/y1JFQxFc7wRgqIO8m/TYNsA8Ktw1FPTCliNpLk952572rTveGy\n33U0bNtJw5zZ8+z5s5gKnuxliZ+k8xU8W5mE2ovt1AS8ErdGfh9iMNrW7xIy\nglXB\r\n=HuMM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdXWn5sH6BFcHwOWvjCIM1TFhNWWJaWuwONdUm318v7AiBI37TdBRBp4rSw2O/ost8PFFE5WkX7w+nlDmwLtFrGWw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.aebe39e8.0_1627672426743_0.1502311253233346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-button","version":"0.23.0-canary.ea889c69.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.ea889c69.0","@material/mwc-ripple":"0.23.0-canary.ea889c69.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.cc5377458.0","@material/elevation":"=13.0.0-canary.cc5377458.0","@material/ripple":"=13.0.0-canary.cc5377458.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A0PCn4E+lTnMWwTXohVAiP7Um33mMSJ8dD9jdrMKIL12zvAxEaoLwM3eJDfG56MJfwxLg5izOFhkFvGNMHkwoQ==","shasum":"ca5677b7b76741c7f8deef7294af2767cad08b39","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.ea889c69.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9RCRA9TVsSAnZWagAA1H8P/19vITg6Sx/iKSPW8Kuq\n/mOfDhLqXOJSB51UVC4fu5uBV/gy6sTmA5EEjE/SMuztWfCT655wzDps6Kgy\nnVmbmZ9k+AuDdxBX+Xw+RkLDFaanfe0tBybE58tVJ2O/GB6QyRkrqY5UjMr7\nxhABrACBtvG9DO3VwkLiHWHbUBkRZSbI2ByXimIBCgwiROOQCIR9mnUB3vAj\nTtub30p8m4UQ2cMpZC456IOi4zoTslXqCtJgsFke0X/UwQ7eHzc49H58jfIB\nUUEzwfAMozjM0I7ejyt1yCR9E3nOX7fQCWxoIvwOSjwewD5CRYZRqCef8pT1\nrduPKqUVw2MCUiwueORI+xCy44QbS1CNzC9AoeH5SdzNfzGXOuP+UcNx6Z0a\n5Jk12iUcE7dTLgiq+3RtnrTTcdKfxJ8KsKKqLC+hm04h1Ve3RbYebmfyIja0\nGJ1DWgu6iQppnk57SXYuvs93Gyj4y6SNa3uFrUQXKjmqyCKkDU+FheP0Wf+5\ndvMQvG5C3RjLxKloLVuWYffr/5ahUZ5c/hoby/IbtZ6zRMkXFlcIHKvQkYVV\nDbbbY1xjm1v3lfesdqrOPX6F5lf1qE7c9zpI9fMeV0j6vKZ/N7BRHq/y76/E\nP7/wvaQLIee9LoQW84Q+LOZPc/1SThKjQyumlyrG6NWmtUxhaPdNxBL8R9Zq\nJWdg\r\n=tOux\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNJfkCUgQkwc2gZZo8T0TVFQXOBQtq9By9jYUxdxwJKAiBbJgx877GZ52TDdz0mMFN75PeE6gOcJ9LQzlZM8LA2dg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.ea889c69.0_1628016465513_0.5460878903440667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-button","version":"0.23.0-canary.21918905.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.21918905.0","@material/mwc-ripple":"0.23.0-canary.21918905.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.cc5377458.0","@material/elevation":"=13.0.0-canary.cc5377458.0","@material/ripple":"=13.0.0-canary.cc5377458.0","@material/shape":"=13.0.0-canary.cc5377458.0","@material/theme":"=13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cZx2cyZ0Rc+l/1L4eQQLXSR8kHZnp+kpbleEltLL59t5Oj+ruFJCBTQ7lnphj7KZCffh0Y+e34luZgu0mC2pGw==","shasum":"dd0eadca3c11e1a1c5581721d9c52db24b4d17db","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.21918905.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbG1CRA9TVsSAnZWagAAuWcP/2IHmRMJiMh6ssuOYx/r\nqfWVLkfyZ420rcvorSsF0z0sPlhMPN0AfCasxwMtmdhm1Gjurqj/Jk9Yi4Bm\n7ikX06cVNTpDrz5Zdcbb+xlxYWKrPC2dAHHy5bynEr//7qP5Zp4PlWf57qrf\nGH3SELdD4kGj/Z7TUyk+l+pFvwoSYZv4g8GLCTaYALVUWZ7XEVg3OHGSwX6n\nRFfB2ZPKIntAd2R9I9nZUDDTzYbg3rhEqrxe/rI+KcC5LZDYwpY861oPEqit\nrbPri51x5l9/5ZFFYjIF+lDJathYxu/TbjiwGjc9HAU4+Ozvg+ynnNBaYlgo\nFTDPT9ImijROXoaO8RUoFXLCi7fGQR1Ey9E5cbVuiTSWblDkx9tjzk39T0z+\nPRENbkaudm/hsmmjCP+7/8R1E160QYoMNunOhRkKLZLY9MmjaVypLfCWymXi\nZ1L5BL2+NQO2WSBHu4YGjwXhPWqUohwpqwh2YhcnslzmIBQwMKGKKTSYhPo2\nv5J3ZPeY9n34cesQ/jySyidl2oX33+8s6npN0XytjaypdMq8XCqomSc+201K\n6jZhgW2ReSeDF3o7yaw7HR0S09ffTzbEjXSptoO/CMAnBKVAkXPs5JxOWIYz\n+HjRb1GK+PB+j/SItR62n40k+nkPFUcTWsXIZDeOar/nmCVGN14O9I2ZYUY8\nqjMS\r\n=pOpu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuuN+QRBIuAIBNZ44cLxhAGMbWVCK0sTce2QzPIKQdFAiAdgKRONzw1G53fmszFnKPX2v4FtkRCC89q3OtVaKoIeg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.21918905.0_1628025269028_0.8451979862079337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-button","version":"0.23.0-canary.193c87be.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.193c87be.0","@material/mwc-ripple":"0.23.0-canary.193c87be.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.7c96e6b98.0","@material/elevation":"=13.0.0-canary.7c96e6b98.0","@material/ripple":"=13.0.0-canary.7c96e6b98.0","@material/shape":"=13.0.0-canary.7c96e6b98.0","@material/theme":"=13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FBC1DzyxLQsWU/YZCWVy45P5RVG3DKI33O/rDwnsxfrzcaeqQ9EBKsFWX0Wkw6gV1VngP21GvyMuZ4RZus5Rew==","shasum":"57e7637bef9ceedf87a0e8fc45ded58a9ea7b1b3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.193c87be.0.tgz","fileCount":20,"unpackedSize":80996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCtdsCRA9TVsSAnZWagAA1HYQAImXd1fl/c4sMI2oXUKo\n6a2L18jTTtUoScdOnldKAKuQ8A49vh1hRz0lLDWMgjpK3qWEfxYsLpUSvekQ\nDlGwJgM/d0ZhSE692oIoRV5THWnITyQS9H3MP1hZKciC7cyitomyZiHEQ7Qj\n+bijpI/1z4lq/PFePAKqRPqxXtnyu5WqmAxj7+4EZ6wKoUfcmznWnf1qBlFb\nkO7i2DQxzsShHxwAmszohd4+Mn8AeHw2IrkmXQqvNp9hjso8BfWFQVwV6JAk\nZGhkOGSi8icbOlvSyGCj+CgrBT8OplY4JB5+6f+DN7dcq41oZ5cYcJSv9Tr8\ny/8MvQN3TaEMjDro5cWRAIXd1plIeAJgZBSuGUE1fDoYx/5SnDBSkoVqQYtb\njHaQpBLq/RSspyMqAgc/Na/smbYc5j2kElcENZXeiRlt9NrPhKSAJ8vvDDao\n15Uah8NKu7cTjar3oZWdJUcIDg6GE+j23octCK0dVOE/HIwP6aeTh/BLV6tA\nqzd9J4rSPS5uX+QZdHPgupWHOgENNaaJCo58j69nc8hqu01XAuZrnBEn+fFX\nAfjlvlU9U1OoVIyWLqUY3e9Aw0RbcFfxZjZbUi9ojcrZB3gs9Kt1xvXjT78B\naqK9ISWndi1r0JvffPO4VCfTYJKRctGSqtrd+du3okIt7n0SunnDfBGnPpYS\nkwbI\r\n=NQJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB195tsmhBjOtX5iJrcq7BUC8/XSeriwAgdlOuRBBWXpAiBy5QtCCyON2ptL5CEpgsBuNDT5JM7xLW5gZFiS5S5Dig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.193c87be.0_1628100459989_0.7543495629044099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-button","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.6fc52d8b.0","@material/mwc-ripple":"0.23.0-canary.6fc52d8b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.3dd611091.0","@material/elevation":"=13.0.0-canary.3dd611091.0","@material/ripple":"=13.0.0-canary.3dd611091.0","@material/shape":"=13.0.0-canary.3dd611091.0","@material/theme":"=13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5QZSE+snA4+5jfWvT07MSptZESFCt+kwN00RMSgRE2weid7Kxcj/B3GY/NFWCq4XW5RI/DNUj/x/sGGSQRN3hg==","shasum":"bb157142d694c80e381257f538eb7f69d58eef6d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.6fc52d8b.0.tgz","fileCount":20,"unpackedSize":81464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCmtCRA9TVsSAnZWagAA2RcQAIDn4cVpG0eSe+bc0lR0\nsvsMBzuC09CxcXWI6FIe4kewV4CzA3tP0LHcwvituSIJJWRGU+IIlneSvb8i\nNh8y0jacsswkm7C3I6XLIq6APcB+uYe3VARDjyOLdMyuCtM7T2992iBnV/dz\n/zwawg1RZCrHGbjOZH5D6kOf93exsKE6Ytk9VcBCHgxrd1baK4Flee3Isdwc\nRjpQYF0U3H1w/37b2GQuL94ItxN7C9rT9qMsB7aZ3VOAE5VeJ+BmCGBZ9yED\nknnF96Isj2Z4Qf9XdZ44N9d8eM4yGrvYqPbvQ7Mwm7s9SLJuQnu3wiYfnjYl\nhfWqcYvG/1PamYlEZD3Zrv+DJoiewYRWh6uzB1FX3nuBEdxVnHdDtOotvtzU\nRBjkTKk2WncVwf78R0p5hamvwdD0oCFn+sy/yuFYALKFxoG5K6ehOKNcnqpq\nXr/HSVOfpG34P8pwWPwkoewsoasstoDJiV16Zf7VfE4TFvFQWYTdLpd59YyF\ngjvEEptO/LQjQwt42Z13h5yP2J7DQ1pihURyiLUW9RDnRiCFcjKGxDKz/vzL\ne/I/CzcurnOVMDJ557R6BzsMF1p+S9LHyDVNitjj3j2fcrxBp7NED8fn6bqM\nRqJ93ApmE07SFBAY5oksGG/SPf1LFcxoR8YmtrT2c8q3LNE+9r+DeDqYS/TN\nK0Xq\r\n=vt1i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAoknXiHp+FIm3FFSAV+C5qXx6ZKFQaa1L2FLJLPb9UsAiEApyQB8xCp2+bOM08A2C3/kQtAdppaVu/rjPWj6IqeRSM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.6fc52d8b.0_1628187053477_0.791091574621984"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-button","version":"0.23.0-canary.e2e9777d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.e2e9777d.0","@material/mwc-ripple":"0.23.0-canary.e2e9777d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4NNHxBOtsN159ObtIeq8va+O0A4s80Hfe9jyiJ5OikxO23SkiPCT45hRkqJe78jenUzU9DhUoF3Ff6WZL81jfg==","shasum":"e89e2a878cf53cabcd51dc3cf0f66e10c2885319","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.e2e9777d.0.tgz","fileCount":20,"unpackedSize":81672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGp/CRA9TVsSAnZWagAABJoP/0WoaTjCQByTQok46rIR\nxg69hCeohptVkp/nrt1u617Ert8npAecxtFrCfBQ666ERubrxl0o/ssGIP9n\nTUEXid0FHJz5z3mSWH1ZtusP0yBgycfBH2HzRzb3x/ETsPTl+AiDEHvX94SR\nfXnL5WRKypCpfF7GOL5AMcG/c+RBjr/lzhrwQJ1QSMLwQT4R39QwOOB4Qrf8\nFksJPsFA4t96G9IReEnBl4+zkHy9a3YTyBK/x1TjR7t4J8Xe+cIi8yewgt2a\ntdO0EtSnns4CeQ/mOvPDtmPAqJzqUfqVRh1SsqzD0IAf/34n54u/36QXH8dB\nhnD/jF7iDkiKptkF4FkW+jye+mrVlAKX9UQbE6QCqqChDLGQ3NxOtntzjG92\npfDLAVSkRhuVQFb+q436q/rqvFZyXYnS7KdSlqK5W8I5kzkvxHpUcWvx2Xse\n16Ogi7OdzDmyiBhMl5BTOJmZH9g8j1wfedrOWOeEYkmgaMg7HPXJK0K1Tmse\nBcCFZWaQm4wpswVo5WKpFa1IYdjJFZlyoqY5OzoaIL1PdRAbcnlGCZ+SMx1i\nuUKOiz/v8e/O/eP5J3eYyelojwiVo5XVtwzrnm0fVzuDusY3amwmoOR3HImm\ny2eZ2aXsv2o51WEdlA9zkH4u2trXNDC9a0/XODAaWcQkshLPFgsSeC/muO7Y\nVGEB\r\n=4Jzv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9RsxbumDNH7fWhoA2uIIgCDI14MGj8e1Ls6ntPQwnEQIgDyjk3ZyU6ykOAh2MSQerrPaqK6MvV5BJqbZ/vmPBjyw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.e2e9777d.0_1628203647473_0.9202786998779593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-button","version":"0.23.0-canary.72ff1e68.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.72ff1e68.0","@material/mwc-ripple":"0.23.0-canary.72ff1e68.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-2IYzpAmUkb8IMDgf2W+3MPcgxLvIFIrwOkMi5TLjWEigx4SPvTBW29FBmcNQ6QS1MJgPw+q8A7WD3HDyGA4fKQ==","shasum":"e322eb18bdac372b3f4423ad65a60319dfd4d62c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.72ff1e68.0.tgz","fileCount":20,"unpackedSize":81672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaAxCRA9TVsSAnZWagAAeZQP/1HVa+ztpP6e6YWEPZsv\nkApyhwErCqzVS9/kz4A2FzM2iMBCtbp9T18W3oB5iIniec3mO4nBh3USkCjJ\nYcl16EJ2jWAm+eIx8xSadwg/4TDrzMksnfjawX4D3mGFcjxLKLdcLHJmV0OZ\nIGL2DoNQ/cttJCLMs7htY3rZcBEAKH66b0y7SDL02UXI8YBpsUngrd2OzDHn\nm3B0kqoYV6+MeBsELPGQgLVYpDjSiv/v/MfKwLKMkeLN6aL3l5YoqcnwZVck\nSEHscJW9Pwi4FeX62ZKTj4UUQC1hNYByoO4NY8eOe2z7xo9AKFRhcWsi8bAv\neEcvVhjn9uSkLafYUXuO2dqRRpMk/IhVqhU1VPG5BEonQKM81EPW0siEpKnx\nYsGeTCQTmfzwGovZxQfD1Mhs/+I1ldf3F/jLB4Y4fe/gDlfIozKZZnUNktdK\npvILPt2zwT3PCPCo2a1NjWRtVppXmjPiZnAQEq2SvmzSHd7X9+ka8z3Ic9gw\nzWOlcmH28wVXBWUfeSg+17SSJ/CC2qhyJ09E/lwP+DMNHOPbqMPpcLcC1KYW\nGbYuZhbVjLaJsc2PzDtvry0JpVpm1it5KZlrw8QVghM9jL8FBMZtTyQLdB4Y\nrbvsiRnxbYF3qJ6f1rFcbL+aAb+HMwRZjkRBQZ2jbdFXlCMMcM5rvr6Wbg/d\nyI9m\r\n=XXrF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYATpWAhNaiDKw57Ks7paI5KeOmRhi3w6UucCvbHh5qAiEAtOqUmUW4mpbGyiTnkGAoi+0tveK4FyhVkt6B76yEb5g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.72ff1e68.0_1628282929551_0.8254059968038603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-button","version":"0.23.0-canary.c527e93b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.c527e93b.0","@material/mwc-ripple":"0.23.0-canary.c527e93b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-donfHoq1+vfz6GpaGG+UKXBn8G+GYZXfpRAg4+5a7YP2XQYdy7ILXLsWHnYA6zMG1OCNW2YXOBZ1RF3fMFhRRw==","shasum":"3605313e593ffeeea9c44f373f0589440ee726d1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.c527e93b.0.tgz","fileCount":20,"unpackedSize":81672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVHCRA9TVsSAnZWagAAOCEP/R4pNwldVWsS+exZSRy1\nr4nPqwN1Oxc28rtyO+xLbUZE6FCoXMHaiWTbbKVIYM9qVY5SO4eMAh7EtMJH\naHQ2pJJiolBewuPSuZvgq6+MdWh6nM1/mePEP9Y24fksdWnv/T99b+iKmGIq\nAeIasW4pKoVpiuJnD285GIqKXOosYaDFu61rDEtrhAhu0Ka6/sIUqXbQ7ctf\nmPPvawWvpLqqGxrRXF0x2trlMOPd6WlWJKTMDNGShytvEHLoVWbY1aUg5e3/\nWUjIHBBy0Ke0VoZ+mT2F5IsHdOBL4CnRhYEGWEHLPtipqGEAOYeu9WLQU+/9\nW7ip8LYnXFHQc85DGJ38qxLSj5rki1piQGF4DZIreuo8x4LTE7pN+fE/Omuo\nN9Q2mNM4ZuPU0+BbPwqwp3xad+I6eUWQRPTDAmC1CnGDrpthPmf2c2KL5cbr\n+afoYU7s2Ow2DX/2pRMZB4plrj0PfdDi9p7Icgb42B4f3W+5HQ+gXyv1NUPI\ngAellpBGSFSmvhFlR6sOjWOVWivg7sxh6YcWuTRpGpVe4lP5WVjZivoc/cUx\n3MoOqmqJIfPITpAC94Be3Cwav9lNLHI2bgj2Ktf470uYtACytsEVMoKwjBNl\n/Sl6YkLibg3Q9OBCaxajx6rq7uJOkoEwAgW5Y1skqHhKYhANvOoORByuVT9Q\nIeZZ\r\n=Et3v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCelJz/NCooJoN4MkheX4aTaANrRUxfIglMOt+n0kopAIhAN7ylgH2euXF3nhp6BKi3XqF02rkTw+gYeHUQ/ih3EVF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.c527e93b.0_1628284231705_0.7986414081014623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-button","version":"0.23.0-canary.78b1eaac.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.78b1eaac.0","@material/mwc-ripple":"0.23.0-canary.78b1eaac.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.b47dd37a6.0","@material/elevation":"=13.0.0-canary.b47dd37a6.0","@material/ripple":"=13.0.0-canary.b47dd37a6.0","@material/shape":"=13.0.0-canary.b47dd37a6.0","@material/theme":"=13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dFIccl/vklLC/k+5Ne1kLO1dBhELbyb5w2zRsUxHLbKCz0d/84EM1R/q/fbS4QXAo4s7vvXqJnrSn8XTlEHHvA==","shasum":"b90736629fdfddad892c03ef84b59ef78cbcd6d9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.78b1eaac.0.tgz","fileCount":20,"unpackedSize":81672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4JCRA9TVsSAnZWagAAs2UP/1PCDrV96KmCI9wYnu36\ncnN4xxb1xtg0VGNvGeaL3lMTnsjWN1Th0hfchXfBjyG1tgeHkOaz8Q/qTN1t\nmawFRFyv2dDxuzgp16PRV87cPt+4PakQYj7W392RoU5nLfZZXQVbc2YqNpTP\nV4Rwa1ir7vYsiumGl0kBaC/8WfqoVWaLRVrOP6is1SHKbaL6MKjyODP0/CMD\n2BFckQxXxnFAyY1iR6Zi/hG1og81+jG6DltiUlNDiu6Y5WTR4e5rSLS18/R9\nD6ZQdIXJQLJVHCGeBlVhhTHLq+tYFtPY78ND1zwSX+fDzVA8f4vRFoHjqLyj\nYVHA9cpoj9zNOMTR6mLqp4Nr/islU9gGedpvBXhomx9AAZff6QmwVE7apqFo\nbYkWVMcRpclL9feOYhsODfpIjhCD88OFhdhrIW9VcFSynu/emGsyPc60lr5F\nqueOU/Z2XWL9wxJaRN5ZoXO4gK80lXds40aV3qwbjORgmtFTgeJQHozzmsS0\n1ZDYEz3CRpIU/85H0RU282x34dRemixNh7zRy518r1U1hdiaXdbSOTMXpsyM\n+R/Sk59xgJrjPDkpHboB8sU1FA4QYA2WPahKOGjwlGpshhHl8QHqJgVN8cQp\nEkJdmsE1I7o6TOLLa+NqZfdy8P/nukY9IJGNMmlDBYv25B22t9l12LFbqHQy\nFfZ4\r\n=U2JS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACNFJR8xBUBiMhTz3uONsjnyv/Ly/rywGLmgeoz8UkSAiAG1OhKgG6nojunn4BanrCMzXgxOFPn8FDMsGlyjYIx7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.78b1eaac.0_1628532233487_0.02112098342913238"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-button","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.a8a4ddc9.0","@material/mwc-ripple":"0.23.0-canary.a8a4ddc9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.7249a3060.0","@material/elevation":"=13.0.0-canary.7249a3060.0","@material/ripple":"=13.0.0-canary.7249a3060.0","@material/shape":"=13.0.0-canary.7249a3060.0","@material/theme":"=13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-l1w32JeA78OxGlIeo/XjOi8aTsRian+y/FaJSqdLcGyLPiZy2vC7FJAtggei0l2oWfE1Qf5Ziw3k4xjBff+Ivg==","shasum":"a1148f3b00b134d3aacb9f4ac18e63f1b7f69c01","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":20,"unpackedSize":81672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsmiCRA9TVsSAnZWagAAyXwP/1c/mivlKWIY+0BCxJ7v\n/IafAJ6aLQdJJ1P6y0qgEbJGwGQRc18lTj/AqRR9tKykKinMwxms/dtcXkqv\ncAk8XIprpj4LgC0nZyaUbCaNRSyQE6QASRsvGyVz3XnpnsOXmw0CRVElI60n\nGCtUCVSm8dnlwKc1Bl3x45T6kR4c+z058G3MFp2hpDPYbM5BHkNBcRCL/otd\nUoAl/9lTHXwFHF1nSSSea1rLBndxbJV0xB5jbIG1x3kFt1zVClm9zq0qsSAn\neqSeb2foGwjaoJSGpBJWFnJoJE5ns0QmEBFrHWJdkGOcY1VtAnFufYAw23MB\n2Gx85JmPOKb/mVWxQ/vftQ1xVcKSeTM1uZxWGXDGbrHlS0GoUQhBIYwPLV9C\nMDj6W2iA59UHYSCE1TQKL2SIGKFtMd0kCU0APxII8/chhMh8AYeAta6NpNqv\nb6hzvdwERPMFVtUuOdN8HZf0AL37rKrf+sAnzaScZbgMyfrAYsPMLY8Y+DLa\nzVIDP4c7jHPI42tdH9QHnNnmVnoDaQoBpHhL8IKVhdoKg6X0ATF0nTL9GpKX\nNB1RYej/goQzIYzYstseZbDwgWDUmUKiHgqxifusHINkhnMmTrYUemLYGsRV\nco20n1Sa08x3saHFBfeHLNARRSrAalHpbmFSs0PD/fkXr5qg619hO5RvkwdP\nvDhG\r\n=wZKD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSipdJDCpt/ikLAl+GiCMzJ0EGEy97shKK+DKB2DfNeAIhAPzda/fMnrtoPzNMQzMNGo8v+Q9EPSoWoJCFQOq9o1In"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.a8a4ddc9.0_1628621218568_0.4403186996797115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-button","version":"0.23.0-canary.99fc0632.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.99fc0632.0","@material/mwc-ripple":"0.23.0-canary.99fc0632.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.f4241a42a.0","@material/elevation":"=13.0.0-canary.f4241a42a.0","@material/ripple":"=13.0.0-canary.f4241a42a.0","@material/shape":"=13.0.0-canary.f4241a42a.0","@material/theme":"=13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FqovXaKjMG7PfNeuHx75rtcfj3UPlYEU9zs6tjvyZUd1RfdCIAX5MAbuI3en0fxmMEHbHcBu9jkLvXlsw/ZPjg==","shasum":"0a413425276186eabc32833b89f771dffaf79e4d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.99fc0632.0.tgz","fileCount":20,"unpackedSize":81876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE10CRA9TVsSAnZWagAA5s8QAIfhbK5Yx2701ZFiTCQv\nU/3EqMVevcHG4/7wMV1SsNjTThIRNScuPjeyScXgFTlVkNhcpAyxbLFIoMY8\nuiiEocU8gTX+pMiaj24+p3Y8i5+hv23nQjJRiwzPJ+Oc5d0sed+sIOcOdoun\n2sV/tqF22JMnciqkXinwl/3D7I33frbi64t6BVTUuVlyIal9sKFwk1F+Dhh/\nsTRLjmZTpQA4o9UIvqVCvPsVJX1MuY6VJXlhjleYP9ORWvAgyTZw/s+nTkbX\nmm4QD7/ywZqaNhYjuR7tpw+1igimUdEWepzDF+sASRUqtE1bsg+2O0mWAYz3\nRcCzF65fiGm3mX+P8/9LlvkMCz3czJ+nnMOsRaPhsfz/h9mEJilw+qByso2w\nyTmcLgACKOHOPM9S+ZVIJfBuUYN3tbziIjJOlbp6NcDVtmBH2ub95LKTHL1Y\n2exYWhdHWv361ykqheFQvQg9O10vckvsK+mFAWTuEsGIBkkU4PtffFWdYUuY\niXnyDu9ert/9EEPqKoPbAimgpdE4RMNGkUF09OInqbpJnIFbfxUNtBjZbq1B\n6hVoFUULtRmsmpBuOPQOA63dPVTgCUL1VSd4wjYAI0GlMJrExh6nfgG1eO1p\ngm4hojEZUtNtgSuhWXe3yHmCI12gLy5Tg9OJAh5zIH9ERzTqvr23hTay5Pr2\nMnr9\r\n=PNBz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFwgGWP2qJJ0GaczS6p3ML37ypVd5182olwsavu17zi1AiAJ46lLZP4PXhECfVqlgBdwpv92qQiBKnctLgUOyOVirw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.99fc0632.0_1628720499645_0.25786578313534814"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-button","version":"0.23.0-canary.3f47ae57.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.3f47ae57.0","@material/mwc-ripple":"0.23.0-canary.3f47ae57.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.0ad12ed3c.0","@material/elevation":"=13.0.0-canary.0ad12ed3c.0","@material/ripple":"=13.0.0-canary.0ad12ed3c.0","@material/shape":"=13.0.0-canary.0ad12ed3c.0","@material/theme":"=13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-rXZYbIy3us+DRs0SGkuLtBVwpCY1iZIp8upVRh6+HoYofkAhny8TNeibzHwnLU+G4HCK36YkzuJRYsideW7ebw==","shasum":"f9c766b1ccf369928b95830e232e45ff5779c165","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.3f47ae57.0.tgz","fileCount":20,"unpackedSize":81876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWGkCRA9TVsSAnZWagAAivgP/jilDses+He4edgMBrTJ\nJGVqUt/BSXL1nQpO/FI81PY433jXXSHxv/AOfRyAb2hSQ12GErAzRU7jFGHc\nOZYk/pt8zyVTkdKtOuw2Roaa007pU3HTKS7tv47DLHU7D+FisYWU3NHF+IIE\nTUMVeyrolFEPyavGcIC5xlKaOfMcLVYnNQzN3ffrGqFgHo+7d5Wnkhife1Ip\nB9VaA2nnYwfRrPqIh3y0BgmBgl1wYsqpvapm9pOLmci5EY+pwH32syjJbuam\nb26isV3ok+6PtiJUwymRGCaaawaktW8IZmA3ciMdu1vNhdbVadMLwuYVIKqw\nfJd8lg8IoFZMEq3R/1DkeEskmt2dHjuKK1BlUCbfQbl5+uaLI5g0rtBedZD6\nkhODMQegOVbMYifxFOVerSpPNo8GjGrDoT+UIM4sTSmJyXp97qCV3bpJ+Rai\nBNg7mhcIZSEQMj9pOc6SOlVjPfShsyj8ZpmY82Bg96YC7ls5dskxuXpgnPQm\nMNLg1EFvKuuy1ajGOq61t/xJbTUls4RHEza5tK/yap9myFYxGeKpJRwRGj2r\nHYKqwmLShFUnksG+bmKilk9ZuAUA9xXPSgMgCY80kiI16KnotTAkPh6EgzYf\n/XcitEBmHtmRNF+BRb+XHNqsRHmjVmnADdkZlBEtVyNyY/tsgWXegEV6at3T\ns3XR\r\n=IYiV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiayuMfmwPzsCt3xA5RtXauBhh85UQRwVcqNirVbhl4AIgBKzcjidiDEMMH7k//bnIMMKbtPdD5IfG6BcQVlUndbo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.3f47ae57.0_1628791204247_0.5545446757192334"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-button","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.6b9bfc32.0","@material/mwc-ripple":"0.23.0-canary.6b9bfc32.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.077dcfcfe.0","@material/elevation":"=13.0.0-canary.077dcfcfe.0","@material/ripple":"=13.0.0-canary.077dcfcfe.0","@material/shape":"=13.0.0-canary.077dcfcfe.0","@material/theme":"=13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iUgwDb8f2rdupRdoJMMElq6fpd8l3BRhFy8Yitc3YHQL/Jz9/wt44rJgRIoceXg0Vfq3h/MUHB/SqOtBsdcOMw==","shasum":"7c8a31f1277d72c8b2b94e0b36c8d603441ab6c5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.6b9bfc32.0.tgz","fileCount":20,"unpackedSize":81876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdMCRA9TVsSAnZWagAAYbkP+gNwMlomw8+ZNikfElC0\ncCbTGbtOwxCrJKZYhtJpbQQLGt2k6e1o5QKXAm2ON2loTdZcKyVFcK8FYC4W\nsAO8ryZ6dNzT5pGi5PAHzqeuu8Y5PgZWLfVLp8kKEQkzG9zL7vfYI7adQrxN\nftjdj/LqTvYiRpIxLa/mTUt44x0gPBVUiQiWi9bgjoDQ7WXCGZvHV9qpa4IE\nh8CP2ICwhejtGnWWnIyLo2L8J7yt7NaO8ruCmH4SiF/Kl8XiPesZ4WBbso2W\nJV1zrMlQ1Vf4ETPl7ShQztef+d49ebohnW1zPS8L0eZ7v1Xu5f3iiK5VbEUs\nNgtXE76AcYuwAQmAjHxuG5lq5cnhAM96RFdhRe5eLcqRq3WDb/rRLzak68Uk\ns9fPRPG2rZCQ8EnUQuJbsA+i9BmLd8nlu+qoi8ypBU3Ma0AM4Jjey3VFvd4M\nEoUMv1JRJKzxG1QWyAZle76o6QCc6a7oCMp7mmt0K9N+N3VKaNbjsyuqXEFl\narjinfbfikCC2xNLEypTSe/D7PyjO0xYuVq2b8KGEzcUZCDTg9/JNcGB3kyb\n9PrQT2NZ8dgTrp5zxBpIJ+e7yeONt3/7PimYB1KdYhCVMtprFnso79NDP6z2\nTPMZ11VThkTPjtZFw8dId4mBkF4kjzjbxMYjNOXZSYnVX5Ms5W4dVBD8P/q+\nCJvm\r\n=Zfab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHk0B4aRcbXy4PvN5sAaeBrZl1Vat2vTB26BXjEZW2j7AiEA41pB9OnRgbHjm1nRuF+n2I+7sdZKBRwMBh4Mhn1Lt0E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.6b9bfc32.0_1628792652546_0.4977191580494429"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-button","version":"0.23.0-canary.c89ecc63.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.c89ecc63.0","@material/mwc-ripple":"0.23.0-canary.c89ecc63.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.2fb068fb0.0","@material/elevation":"=13.0.0-canary.2fb068fb0.0","@material/ripple":"=13.0.0-canary.2fb068fb0.0","@material/shape":"=13.0.0-canary.2fb068fb0.0","@material/theme":"=13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-a2RnzZ0/dLK2mi0CJxH4Dc8bNY0GD4+PFudR6Mw5c6tCW0YFjC/eWQkeNIxKJJNwIAqoI/vjzs94v0eUW/Y9oA==","shasum":"8a5583a4d4f733953e9f57e10758fd650e129503","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.c89ecc63.0.tgz","fileCount":20,"unpackedSize":81854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2LCRA9TVsSAnZWagAAa7YQAKGa6lPDY8jM76a3ZPib\nwL91vWlPSzwzzyPWiEFOXGfXaMecwHPv7D0APaeDqK4HRjkuccNzwIg8pJxt\nkTkq5STzkByiF3GzkIxHn1Y4eSkvfE0OuP7MczpLD9GpvopoNvsd0PcPBl23\nvGcrkmy+KwulMKvEkCapfTEbFJp/QNQGSkLUjGKp66wDBZK0IH18F0R/0xRL\nCi0R8+4EhIH9bDntebMvyPBpYY5ISGPEzSsz+x3xkW6SGsbT9UPkHOWDvIAn\n/qhaW5Q1I/suTZLiqpuiAX59pHUK0rKIIGNId2PCcEKK8ndwi6I0xcc4tmAB\nV56JJfbM3DftZdq2Ik0lPxFoN5MG6C0EyqHr5vubstFL3JA+JjOnWM3aG9PN\ncrYzcmp4ascegQk3aPwIaNC1SjMtp65OM3VaiYfUU0lRJ8nNWV8VhnvRyefM\nkiVDMahBk2qsCMywwJAdLXf8N29INGwr6a5rpdg2YBQuabjxG8dV6y47amnn\ntppy2Tc8jiBy6JGmfWFNMZZQ6v0vEeWy+ejTF7XfmV3UTAalhT39TLVzJmWD\nFrUITJALu1TYM6RKkabt/9X/ZvyB5P4xbfAnF3bw+Q82Otx+f+aN2pxcKyB4\npgxwmODP4SSxvWGW/b7pQSQ64/TpOJDaP6pUTGd2+bR8BUqqClKRYOd5RN8o\nd5mW\r\n=wj5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBgxBUw52JyGXyab9YItfaWWs6J0CCviTcs2ESroil4AIhAOYlLca+qAg7JqpdIC1xEz5BhfTBrud/SmEMVQKXxU9a"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.c89ecc63.0_1629134219281_0.5972356316962195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-button","version":"0.23.0-canary.59de86bd.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.59de86bd.0","@material/mwc-ripple":"0.23.0-canary.59de86bd.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.457d89aad.0","@material/elevation":"=13.0.0-canary.457d89aad.0","@material/ripple":"=13.0.0-canary.457d89aad.0","@material/shape":"=13.0.0-canary.457d89aad.0","@material/theme":"=13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JSk3N5Pz7AIs3lyW4dmdNWw6HgpNYsaAfjANqf0z2LdBl3lNWLqUEFxswddbCKLk+1y2TDS+pJrdF+gTQ/MCYw==","shasum":"1853131b45485e806e26b0ac6eedc14404b077e2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.59de86bd.0.tgz","fileCount":20,"unpackedSize":81854,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSRCRA9TVsSAnZWagAA7c0QAKHm3cvHfjhsaBNWVVMR\ntVqktW3vxhwRCn+IsQDE9R3zM3/6Xmqo4cBkUQwmzD6dXuNWQQaaEsMiC8X/\nVXXPnCDmuiCF+SqZlj4FkWDyFu40eWIYCdvSDHf3EkPMaaStg5TfBPSijkU1\nZWCHRtr6nanTbvrUpDzAXMNvbw7Pby2nahZx7bVDGgv/DcoziJKrWZDWR/Vd\njeDAZNXv+hJMIOEMprSlGU2m/Qy6frIb3a9R7XzViNSQ1tAadGcilChFY/yb\neVeLM7fJlouErXZ46ufWteyCW9BR3JGF6wjbALslrRkxfHdsC3DpfCN+q/KG\nZnSYoSEwPPYYS43EXvn+5Jb7Smo/mvxb5LlXgpd9SkqRjnpNeEFLldS24jC3\nA5KbAQye8i5rDUYwntyINzjMcIBttodl+bF1JHdLuv9lZScgE1c7mqTKox3a\nLfHOJANRJFs5XPTnI+QC7NQUheTrjF+tS9vzuxB19ZhF/VRPZLgF5+/T4b4j\nn3FYlPdHk5iSoZxNxz5uU7yIGtK2robbA+7V3JguHf9q1NBwV5T6O0LUNjG2\n4sbReJ3aNpNYh/MiSp+4hGeoGlGKfLJx5mnbWimRl8/6S0RghZldNMlDOxM2\nvu6/rLCC1zgZt15o0rqcYpBqtPBrw4SiR+xulnZz3ol8bJpw205udA5tYVB4\ncCCr\r\n=xEig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxNy6kAWYie1yYnnF4WDQP2DIX8oKaf0btjF1sAXF5jwIhALQEZqmlvwWpkYvBugFJq+z//SdllhS7tTtscKWQ/vhs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.59de86bd.0_1629250705553_0.027129663240788027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-button","version":"0.23.0-canary.dcda879b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.dcda879b.0","@material/mwc-ripple":"0.23.0-canary.dcda879b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qNKqyVA5BtN/LbgTKg4qYIz7VnjXUFWRkBSnLQxZ+qQYzaICBJU2nX9xy+/DKr8q0xm8z+srnX1+PlBZaf1PEg==","shasum":"52e84a1f1b46b5f4ce44c70837ef97295da08418","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.dcda879b.0.tgz","fileCount":20,"unpackedSize":82074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhYCRA9TVsSAnZWagAAywsQAJZ4Ia78UVYlrsABCZ14\ntvYNiXYC35BdCsslxUqRGy/8vUyKfVmMT7lK30VQBQvIy5TB9Q9LwAEtMg36\nlywUcugfWWdnMWcDqYdbA3JMTOuae+mFhwIgDZX9ROyvlto+S0nLQmuYRFa6\noT2kJ573Ct8t3WlHRnx/+D/3VJjuQc5XHb2SVpwf6hsl4P0s6vE4XfIb8P1h\nDKDZ+PFdro391AezxCtqolG0c9uVC7KI7/eXjIP/xLkNcDq9hi7SZoAdhuqr\nmYjZbQLjFJEdJW3tqGiafmfrwRYSspTLhcouqQYjoS03ty3phHT3kE6AcmBC\nen6YH6hizi+E+8ObglyZNBVuDQ+2ldo6c+rAy3+02n3OecA99GfZRbWu14+t\njPyF+DZW04C71agrLQgq8mJGGjbJ5gtnjChBYztRJg6mHw/F5IeggRVPL2RG\nor/hNfP4DHSEUBAVb7hkeGtEk5HI+1KXuOYF0IBhOpUTOstlH8BU7xcvcm0F\nnFihujkSUlgyYWFBR7bI5I+nCSY+7EfC7hHkYdI5DAXdFFuKO7tH/rMt4UAB\nuFK5u51LnbAsPYM0DV2iILx5YBxrKS9EXrI2+rldKbmGXVW5T2KlT6a1LbUE\no23uuixI3ae1ioRJIGp7s86NGCqiDGsBUSm2vNdCpdEmWkQgu2EyYk3h1cAd\nMYNH\r\n=UMyd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8zjQgTQLWQmfKSf6nWPluJe64F26r6B7nDqVts8Kz2QIhAJ/DG0c4kAnlF9p82vggZrvBALhquiYJTwhD1EGv5jZT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.dcda879b.0_1629325400618_0.5141481625939066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-button","version":"0.23.0-canary.dbb8b366.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.dbb8b366.0","@material/mwc-ripple":"0.23.0-canary.dbb8b366.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| 'expandContent' | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3677ONpQrFxA4hx7bWpSzFZ/47a3FSTBkqqePWAp5eYGRjggEP62V08k4G3GO2u2Xn7Uj0vu13hqsLK7R181bQ==","shasum":"58936b66940f54f6ff7e312f7f867c3c77a149c9","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.dbb8b366.0.tgz","fileCount":20,"unpackedSize":82074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKHCRA9TVsSAnZWagAAdFsP/Az8lHyNQKovLeLRu0/5\n+0tMUUE/d7EKjTVM1+GwlALZD6ifb+rjHWv3osuTy20gPqI6fZo5rZAARJ3w\nLAm329Vu+wJ64eLnn1r7bK95L8aGEFO1rwtPOHXz5dFy4jqNUihBSZIo07rn\ntIV0A6JAznx8EmMbxm4t+6qvxUaMfYQ6sTB9QJ0A3FbODBC+oXDSyY9YnFio\n2WM1LeYH7NZAlS7TU3F6kyUgkj697XHy4fXvDmBBcRlMYT6MMbqW//T8BGY6\n/QtM2RftgP+3EqnkVD+qNgtITOGKGUrMVtzNTvn7Asg+55eB4iPrh+hWjPA0\nFxxdIruTjKu3O/y2NpSbJmSG5TzDguIlzo/nKHMCtJFw8SuZD1TYbuu8/ebF\ncAtfGMq6Ckt9LdVySlw7IBzGW90R0o1qgSvZhqChUee9ybos8ey2DPFqYbJT\ndovRGoDShVmGrKvBncguHgbIk0P+HpopGLEXaf7rrMG96NnpAIv9toHtEMnr\nbJFklDLQW5ssJyb5yTezK6L0h95Il92f1eIJJI2lETdmdxV7WWkNQf+niT3L\nTxRO3O6Kb0kY0eVUbMgisNnYhU+7pEd+A0cNNaJWos6QMrAg/tZBlRwd1yUU\nlnk0pzdU8ZcYfh1SfYKxzVpxmWwfHP0FsvP3xfq++ZGdJ6wHtvF/Y67LRT7N\nGZgm\r\n=OPXd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGoEgXLriyfsm4jX4agNEkaeUynTza+FSfSITEUBb5GMAiEAzzxXNkE/gWg+8SOE1hTyDCtwK/L5XAYlBgkCJsBR/as="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.dbb8b366.0_1629414023354_0.31053895213713356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-button","version":"0.23.0-canary.c6e3060c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.c6e3060c.0","@material/mwc-ripple":"0.23.0-canary.c6e3060c.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.43d2eed2a.0","@material/elevation":"=13.0.0-canary.43d2eed2a.0","@material/ripple":"=13.0.0-canary.43d2eed2a.0","@material/shape":"=13.0.0-canary.43d2eed2a.0","@material/theme":"=13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X2G5jcIBMMvycGcqnzpBtYUKPcaWLP2ARfZwdnqpFhoGybqt7PbODw5tisvncSsrL6oU8nigku7cWd+Gcgi6Mw==","shasum":"4a9cd18333f194ef27d4c08c7b68100c32016ff2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.c6e3060c.0.tgz","fileCount":20,"unpackedSize":82074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuL2CRA9TVsSAnZWagAAhZEP/RUXlM6x6N48blAF698W\ndXWg8HZ61W+rpo8gJMZA9FGZsUwpWt8C4wxEw5mT91/GwxfkNHq1TAJnmDBW\n9K9v3XgAGQMrxJn9ccIok4mbCCOqhlOzlFYdiJZwHwYumXWoBqaHqTnajwxg\nFiAJn1f6F0owaRVv2+Nr+GXlWaS9wkogJfvusWg4y7r9GzEgyXljRPAnE22Z\nBUdG9tjIVxMwsDPgTd5z8cf+1chuLQotxNJ+EkzEn3KD9wyhtXpABH9I8nds\n9nwKuOwl/7DUqV/p9b4R9lLKP+UOtFFiThtjkWql8XKpszEsccuF6k75g3kB\ncjOIhdAx/ivcEJv2VU9BG1mAcCcJs6mmA80tSsm0yYtjuLS5/e1e2/qLuM0L\n+rGlnh5+aCAE2UpyifC10Dvl2+IYSiLMoz3Is7waTYp2PQj7LZWhZ1Sl0bht\n7Rfx5by8r78Z5COqeTN0m2T2FV9RpiBEK90LRELZQe31ZvvSLiUP0gq4GEOV\n58WLzhB6dfMtBLGLd2zr/PpqqAPK5Wdwh8rWYAPSV732iB3TQNa1TSuA1+uK\nKXRIsTp9eaSy1Zk0XAIAeSa543e0mg/VgIviu/Xm5gP5yJ+O7Xq9AXKLg+gO\nt0PWh1I14tahBvrVlZIJ5IVEK1r1Y8EqfFXO/zQAViN8fIH172WKo1i1BrS1\nJeyz\r\n=losk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGQP+l9jP9zHinTjyLydWmkX1Wz6MHknud/IepOR8I9AIgKjQQJo5CA3XTdQvZO239n9LM+GtZxnUgrJbQBu2F+tU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.c6e3060c.0_1629414134175_0.5646580181735656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-button","version":"0.23.0-canary.03120b7d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.03120b7d.0","@material/mwc-ripple":"0.23.0-canary.03120b7d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IP5UM5AyuuAUzN/5dKFWU6Iu+nT0oDAQFtxghkmTlqVUMwRUcI8toFbvWS2DufNKlNDX1woTecAe/dFVK9qmjw==","shasum":"40c0c64b954304778f470c495b98f223f6f042d5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.03120b7d.0.tgz","fileCount":20,"unpackedSize":82074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvboCRA9TVsSAnZWagAAJ7MP/3kUYxwwm57/nJHGwcHZ\nmHQMO0lilG7nFsqWs8B1wRGd3LlC6xvqpie1Y3bWs+QSbPG3p1/SeSqR7cAd\nqQVMoPI+1ZAl7IXE7u+RbpkqCjgjvBwiJ+Q5mvp52NMezBfLr16CoIxf7pqP\nO+bQHRH03kNz/+APtt0wT80hFY3JtngLDXuO33rknzpIR+jATx5XFhpIFDPw\nOQ9WrntjPiIbxZaea1Tz9AS/aOlI6JPlor/hlrO4Yb3MzBJEwerFdWYMZzTz\nhvzJNtLYnXiQiAnNYavy9FxmXZnTDp46UpHr9mJs5srUoMCZH0caS4pVSh2v\nUU937z5nLcvGVCw0hR4oVTPfxhAizIlwuRkMxxdzK1QNvLiGpen5A56ahBu+\nw64ULWLhFdbklryC1O1aNbfhIWmBlK5pfKTaZrAZ/kLMVo8NTkJJsrkm303r\nAZg5O9eGb258awNZlyW9lQSw9dZMDpe9/45lxloPAqt4BoMSQBgrrjDEBFD5\nRsPDGblhUAZy9dc+irtq5eA2OxjhmMGn0O+sqGd/SY28+Cw9bUNghwsukiBR\nwFIQNoS/Zo3k6TtKyHfy4IM9EXbKkocLaHSGVLQOBmfzHeLZbJwgi2jQNJtF\n51EolfkQyhI9NQZsoepjEjPiBD2lDLiPFQFlnBziSiWmdP8FfmpAqFCqZJ8h\nXMUd\r\n=EDsM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7OeUJ0fkeQhBZCMgBv9eKwy04+qpmjWf6OCXezjpD+AiEA+sXSMAgNe51hMZa1TTqPSfgO11GrJtpdJiLecFQTnIQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.03120b7d.0_1629419240591_0.2286952641250557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-button","version":"0.23.0-canary.d75a5f74.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.d75a5f74.0","@material/mwc-ripple":"0.23.0-canary.d75a5f74.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QnamQkjtqcKzaPiB4EF3cUXxVymqDF9yFE8y1f9gqVGkL9a6ZXJgSc6EuRFp/Bpp8MXU+BpNOk6Mh+gVVb9DWw==","shasum":"f30fa385b7f6f4c38e20651398c38378a5685591","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.d75a5f74.0.tgz","fileCount":20,"unpackedSize":82074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2AkCRA9TVsSAnZWagAAVMIP/A537cJ22JfVGHFC/rhz\nPKgScV74v8EkC/2IXjgkSM2lUnQjaztx7SuwjYXWS9R+bRJkqDzKPxrW7exW\nbpcHbvdKpwg34Lvb8ablVOb+942WAC8D/h4mzevV0OOX7oaYJ5v5YRCEHuwr\nv1OLU2Cjxr6x4h1vx8QPqcF2w/rTNMpibxULiLmhlCZLEmQeu75DpqGplbKW\nM3sMWgLI96KZZG0poQL6HT4buJC2eyPONsu1RskNbzEw4H0WbIZl3sPUiAYf\nZndcco6k05wX5X4RaTZU91ySkRYCendFmVmUmxGyj7sTs5j+GUDk/lWMZJS0\n95b5XBx0bDkHwWgeramcbuCIhBtnxgOWqE+GZwuo7gJmi+ZmIEm5VwWqyB6W\nPYuWRUmH/N709pvDNfZDdw1WO3oMOpoVbxxA/izE/rqjKauNY+DJBZ2q0+Yl\n7v7L8Fpr1cNOB3BEjdYQSipHjAm0OsfHtqaMaJZIil02uZFUICjntBXBsBpg\nXwn3DXEyfTShW0PNMvT27YeLc7IXXCo8Rw8BRJzlWQTotXqAaOtX8ueoAE5i\nsxMmUXTt+/oPb3dZ/45MYqKSzGuGfAhu43uZavhmolMoPpMBpHY3J8yRJVik\n8l3aisVxQY6ZKueM6kTNJIVSvHlp5ZNGs2LiXX8tNXMvzcbwjDgI7rJ2tdLL\nNz96\r\n=n51G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGH9o348CTo0cYr7JOmFbW5jst1GZ983+jVx9R8VDs3+AiEAneGKd92bT7vdIpaW0SNuKnK+6kOFoqSoCFe0vxX8jOY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.d75a5f74.0_1629446180672_0.12375892240575004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-button","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.3d79ffe7.0","@material/mwc-ripple":"0.23.0-canary.3d79ffe7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aD/Rqx4BB4SSynRKJ/KyJYawD9whJbFCdwPUGZhtjaHfGPZIvLpmprBJ5ZQJnVYJuBjWU1bg7siv/njgNe6e8g==","shasum":"6bf05570317e1798db704b2b93035b8c2c5ea49f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.3d79ffe7.0.tgz","fileCount":20,"unpackedSize":82074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+ScCRA9TVsSAnZWagAASTEP/Raxl/ROsez7fpHEN0wP\n+nrOtfgNUdnI06t8Hl/o7hMmJu2Hl1zg0/YvUod+qLdydDjvJcz+mUgxruMt\nTyaLje3faz+kl4Omck2UdXZr8KYJshDdkXR3GMOrSjdtwiN66bt7zUVb0GdB\nKZ9Y0QovMvXl1qPZ8i1nmNNIAPz8WCcYGefPitVLiqS0g/3eSJz5wGWyFiUf\ny7h1HV+biJetCDLTzweiWbnP9W5Dtb4he+n98X6emW4HK2cK7Pv0xKf8aO4m\nySXzoLz94rPu06437tcELkhFkccbpSzYZD9BbFWbyjg58pLLRjPV8aE5OJo3\nuEevpNX5uhNmX8BhR/pja5Swqu8hllby3Lae4R3Q0HJEln31JcskbwXN9rcC\nW9faWgEruYHhz8oxtknVGnoRa5jQPac4Qw6EiaB/NG66sX/umnXcBBy+CuS2\nyybzwpCQc6A+DvzW63NaKtfK/a+k98NF90HH2XdZZYaeDMpKS+/yLUZ01sNE\n4em9XtGhRAaX0w5PZi3WrVvbaie6Vz6YNlVAF4XST4GK0Ii9BaSHgzwBGJRT\nGtvABicj9Ubn3LwLo1KuHUNqk+XmOavIsYwXXDd36VegBcX5JZua4FqHJfhH\n8I1+6IXQdfsVcNVXG4TjAr2+B6ktU/zxwwwjAXt46rZRnTV2YpNNYc9jagGt\n3IRY\r\n=WAQg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClvg/I/hAxTxzIdAUhkzAR0aMLaAQiHGu7QMq0Ra9oxwIgL7pWr7td8/FpGwz3YSmdzCVGgJuriWuBjslbQvaXo8s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.3d79ffe7.0_1629480092272_0.034866501280891526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-button","version":"0.23.0-canary.02213ebe.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.02213ebe.0","@material/mwc-ripple":"0.23.0-canary.02213ebe.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.0a9069300.0","@material/elevation":"=13.0.0-canary.0a9069300.0","@material/ripple":"=13.0.0-canary.0a9069300.0","@material/shape":"=13.0.0-canary.0a9069300.0","@material/theme":"=13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j0Vd8Vxdak6B+QVmrCjJi4XC2bCbfcwWoNiPXK06+sDjGRT9unRVwrLyHPtba82F+d2XNfLjsbsOKexC30lJEw==","shasum":"9adfad400a370cacfdda903921cfe775447e221f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.02213ebe.0.tgz","fileCount":20,"unpackedSize":82123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+W1CRA9TVsSAnZWagAABDMP/1HkAWdDxN9OK6JpbW/N\nDNl6znetVgQrHZ/uYc7HxdYsf84IulAKCRmAMOYemKEAKpdYpNRyOmSuPj5E\nXqnhfdqQL/PskD2HWcbG+wzJqWvJJBszOKk1myUJRL6v/lgKZektdOnEVD81\nUjTohXfVX65AMGlna+LeEouuR7WHKRVAZBxXdZB/333qmJgwRsKRKlWfJm7f\nCT48nJj4F+XMNfqxL6jN0hEqgLZmQKQiU/ONTMBkHOSnLt9d0uH8B+Z5xkJ8\nt/WilR+GhOTSwDmafP0e9KZ7AmidJHCUWOFpmmU/qOTJEGYAszdqDYbfF0hu\nDjsQPurB+Xc3N0NMm9S2fxQ0eNSEMGAW7y9pollYm0jsFbMrMW2N7Rqponb9\n41ogzitz3NijxyfNTNOLtqhSgk1GAJNBq82yqosiRy51bimK/PdmAHStfYsF\nT/t9E5s0dPEpbfJw2bzjy1zQPrQToBqAHK0N4WPNmilksRg1SpjsEhqzi+cb\n5MiSF6PwAlaz/wodtAJ3QNC5th12fXz1sGgCablYwlEIPnVDCPKoFL8TDAFu\nfiFIaFLPofHEeOuBsx/iv1VuuUBeRU1OIidZeGFLDAPbyJeJKkmjNAN6QnTv\nfe9Xk8WX0VJ0iBtoPIr8HiWdZDS68zDXy+7ujYv82n1bBC6KpJtHLJygg5lg\nQoMe\r\n=u3AX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcWjw4jAtf8ScQx00brl12QwnyH8QXHXfv3tKn6Oq5swIgNHo3KD0LLd6rU88UlDuhXVspmv0odFfFYc5oWw75ogs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.02213ebe.0_1629480373393_0.994799768952378"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-button","version":"0.23.0-canary.90a999b9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.90a999b9.0","@material/mwc-ripple":"0.23.0-canary.90a999b9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0fAaT/glwfVkkGNqJFd4GizQRBYrbgBveRibifNqO0+oFKpgialXwXZMay/z0Eci1CB7KtFcsqpEGVHsOo1YqA==","shasum":"c57a74cf31462173313489ae134bc544ee55fa7a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.90a999b9.0.tgz","fileCount":20,"unpackedSize":82123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/efCRA9TVsSAnZWagAAFWEP/2APc7xjZn6Kseyytiz8\no0lg4y5z5mMVB3dE/ggDYfOt3cJx9RE3sZ2Wz3dh7VOMtJnyTH1Z67NVg5rx\n30rHe1dwPi5bg7UdNxrKH49bK5hDT4EdTfLO3CaNj5sJEmMJT7D7DbpVULZh\nFNDYD6+9WjgqwOrkzsL95u/gW6BK3AgV5UHp6NwHnpnzuXH1iFaBsFD6Qs0L\nUlR8ZWRKzBJWozDtn7exRyPVsS1G4pnGk7j9ltGLJaAM+fT8b0IEEmB55pDZ\neQ3dwYgjLRoRMnwus4HVxnobmMF/BLgK0tCd3WIDvwxHAc6NGmYnPGoj7YxJ\nzlO0JX1DZQUfmCL8YKGTEZjpDBoR2G5BNg1FGlmMOy8azYbhFpZY004hsG+l\najr2OEHWFUqVSoi7FC/WKbs/x4gv+ty6zuTv7hmrvHylLGidpdKl51y1uba0\nUDPoP5xuEKJiUST1XHN+frwKVDM8aC2GEdOCkv1aBTxBJeYboQABHiPmabUw\n5liKQCcfkSzZVaDto8EgvMxUcL/yV3rNfMvTOln3WAe7AiF2BN/ndCttuqvx\nuqBpLmYYejTw11Sq9UnPIPmTMIDo3VuVZrJB76Gx86p036++2Sd1rCUVs5a+\nyARh/65AGVGd/RNPbLCEXRHIqoAPGOoRH6D6NwTPvqVYr8hXOTUFBVxz1IDe\n3UAy\r\n=QYcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbIOJjYr3vJ+Tf0DY8z/r9J8F624Aco98sribqY7RfrAiEAkBR8gPoawKH2NYL8CWQMyxpzpIHc+45paSAQXZNEiCE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.90a999b9.0_1629484959833_0.6122007315893381"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-button","version":"0.23.0-canary.6db58716.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.6db58716.0","@material/mwc-ripple":"0.23.0-canary.6db58716.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Pz1SJfNAO/rn6A9JXZVuLV263PqJgaNDfazy0XNetIA6gG68RJFadpJUjLPCx6qU1Jvhn7G0T0zOWaTUhzsVEQ==","shasum":"e3c617ac1ab459312f1b90eb9f35a024e6bc8a41","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.6db58716.0.tgz","fileCount":20,"unpackedSize":82123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2VuCRA9TVsSAnZWagAApMUP/i/4mhu0y9kpFUjE1Fam\nsr5r5xQ+KMNEIDx/JXa1Upbi5WMzDkYxEI5q7koHPLcKTwumeaEWcoPm3UDE\ntCflogtHbBqguOhchUaXMXRdbl4HWD0+yFt+tmde3k9Ai6ZAWTHf283exBF0\nqBoFEKR+AgLMScWzf8bn1YZiDslZ01kpA5wkjh8FtEYdGWs3InwMjWdO9Gen\nqrOaDUDkdd2PSDKmUTyedWVNsI4YwbDxwyujACOg9KGOw+rYpkKBv+conI/p\ntHJC826S4DKBJEn4DWXQwiZqXt3GhFcK0nhFFSqs4o3O17TWEKNgS+z7el13\nhdPHTFlff93nhjXQ2BqSOek69D1Tdp8kGZo7pea3ZToMjQh8+O6LXqCtbJ5F\nKsIUcN/omxiKv/fDRi/s7lGuLCoYhsvxBW/dtanvIwXpauFdHH88vPc5/uAw\n6dsBjF0ig8ZCnhTOibjPq3l0FimRS1OEKmxxNVEaliPk+wZ3CYS/ZGFU9xfN\n3OClt9U5oAdH8IS3P+cO1DuqF8+NlqVzk31P8Kq6UuHAi1BCXyG3xr0NuidZ\nuOFTRD3NTp3WWmKcicl+sPLQ+Ewv42t+n+R2V3cZsqQRLD+PYRHZ2pj2jcqh\n9T4FvHj/mVm+Co0QhqS2xBb9To1y5UMdf6rSK2/UY8acxM3OQTvKpyc4VXds\n75aA\r\n=Id/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMGoTjfzJpRLelXZGiFhjBYmTNvFa9j0yZbpA7yY7aBQIgMIGSItr9M3ZMTSuqWK7PD8Zch8MI6D1spkjGis+7DAI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.6db58716.0_1629709678498_0.9289860151667511"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-button","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.9fb5bc35.0","@material/mwc-ripple":"0.23.0-canary.9fb5bc35.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.7da413ed8.0","@material/elevation":"=13.0.0-canary.7da413ed8.0","@material/ripple":"=13.0.0-canary.7da413ed8.0","@material/shape":"=13.0.0-canary.7da413ed8.0","@material/theme":"=13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cL+c5TwNvT3Kdoef5Xrmgn35gyMUcnjJlq38o8XaCpZ/36ehX+fNeZ9azvICQWP6sbt4LeYSKcp8H75YBupS1g==","shasum":"abb29ee767702ce2733a28fed4b15402ee1f36ac","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.9fb5bc35.0.tgz","fileCount":20,"unpackedSize":82123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCYoCRA9TVsSAnZWagAA+VcQAIT6nOZaenVYr5CD/hXs\nwPAF7IbY3ijbX4EiMkmSjGJBL+1r2IcmGvxva3y7I/PzSx+9gDhTj0xxtXyh\nGwvsPTMHyLfTrrbFl+CXeEspmTJIFeeOBUVTZeitqASp1hw5Rg+DZBx+VhBv\neWPq3sd9yTk6mIJyFuqGlrzI6ZgH73MD0gSGXykQVaPlyQa+PkRWBxE6fi9O\nSJiVyxSdwI9ILspQ4ehA7LNN0OQ9iSCeTAL2APNb6CGC79UdINAk3KOt/dzE\n2Ge2YTB5/lYSUgcgo0KPomLqaswSq177qn3GpjjTsbO4rm7nkzeDHw006qqV\nmwIPEJPLarw9YBqctiaKULSTi+dEVZJkEQfZHu8KG9y5vXgfhJzVCCOEO5+C\nURU1OwqXkXQCP5aFUhYQ9xlpiWPWg4WtXHrLFFiIPBizY8oxkwZfhNyu2fQt\nHh/Bo2UhGDpKIMyY/d6dyqDEeE5s5JD5EkN+Dtf6z90cm0tgJPXD+y2RH6ft\nhuVAMSR/oG+xkt8F5GwA/Hyt4IGXBG92zOCbDRJ8Y6A3DhM5NQSxZXl8oXkM\nUmgNheaSQnGCa/f1EgqIYl7q9fq/2A7/NjLPKewOK9RS4WTRtmNIagrT5IaT\nWQkSb9svM/2zKI8j7r+d5PmMHLuU8Bkg1+S5Luq5Ahv3vuicUXoiFUYuAghs\nU57E\r\n=HTW4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD65ppi5JVFTP/ZdLWZgJIk1bFuxp5d72rXEYo9AaOfugIgfrrxvJi83AphrtnsybhMSuBMYFZrGP1PjXnVn33Ojwg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.9fb5bc35.0_1629759016507_0.7201912811316302"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-button","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.ddaa5d8e.0","@material/mwc-ripple":"0.23.0-canary.ddaa5d8e.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EyzVjsc4HSIAPLJ/KqkZbU02i0QAYE6NOkS4Qqm6i1Hu0DE23l+njVaAq9psrAhfelovnZVYJLKYEjB2oVD5EA==","shasum":"8e7699cd42b2d18ecd42e88fc162ca33ce18edd3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9UCRA9TVsSAnZWagAAWCIP/iRZTjfSkYtgqb/XYl3p\nobMb1EblexAupb+dJD1qHYvByZG5hVVjFO0yJEewU+CNWuXv6FSD17px8UO0\nxLPlyV/ONBuufe8ZwdVkSjmzqU2a5xDB51GpLRnSWLnp15J5r+2zkbc6QuGG\nKmcAdU3CYjVfQZa9d8PMQldE0+t1DPXBP+czHrfKOLTStWUqUhr2fwFoh8wq\ntbRKTuiiKrjmFlhiLIUIHSMUImLCW5BzuUTPt6RuBULO+lRPYjAKWpz2QTA+\nzYSWduh8NQo4lY3sA9mFyOF26ZgoRGdvdLP3JkYLjLnvbDACE9hxo3umX8XY\nziW13lEE4QCi0E3Ogsc/Da2MrGgt1OieMdog0+oSxPKFWNeoqDxKfqR7ilde\nwHbygcXsnbaaQRv8JMv+QN+8ByiUvdhlXhQivd+Vc7f7/ayn6mAHHPhQ9/70\nC2M0G167idd5YkJun/q48LCM+JI3QeJm2cWWkUwxlEuIAANBbNJHnH6BDQMU\nf1DGZJrgftnGbdUDUr8I6eZqLKwEIBSNpduiNhmjiM2cfW2h/0iAuBqPPcVf\nUMT6+mu8vbJc8Ttb7rh08tuNox3Nyx/9IRPnganX+omSG7YDPrkTxWyp2b0y\ncGhWZgAlUiTpqQnmTeCBqaSU6pwsBgGAtCh1ZRheqm5YZxxM7I+SMsXq3Plw\nLsy+\r\n=c9G5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiuSL75ncOEUBAoZvnwnXQJ14fqH+uoMsdBgvWLQPj7QIhAN+2KLTkVK7z5iNhOIiNvGW8176hllrDa3ToVFlBCe0Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.ddaa5d8e.0_1629830996182_0.13877272746975966"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-button","version":"0.23.0-canary.756208fb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.756208fb.0","@material/mwc-ripple":"0.23.0-canary.756208fb.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mATh7tXrc/svTYtb9n4/m7bXZiHGSuTuF5RspB1NVUWRxNvhv/paDtf9blzB129VqWiQ4STkJG2CIoIqGX90pg==","shasum":"cc228b18f44dea2f4550e0fa2e5f2c57cc4e148e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.756208fb.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8RCRA9TVsSAnZWagAAthIP/2jbcRqM5jQeeHyn3ivZ\nQ/G0Arp2u6w9/rztPMEX2eSllxNk7gUfRmCepITKKW8agGuQf7yJdcBMOw+X\nri8U7j4OBY1xgow9kk0DPRtH8njYnVJevHwUq9iQHq3K5U6pLlvY8D5vKxwg\ny7l0dOTmlsyVnO8pawbmkBe5kmX6dIUFWKWvgjdV/4B5Je+rqfNaCprAhHQG\n3jjBtFcNoEj1p/j8O6OQDEMbAqKOPqB8dOdkVmQ/MOqrWkVXr5yoAHGY9tKF\n9Ur/2Ky6OVla9Ym2mmRptHd36Dixn4OgFdZPRK5defPbBFrHLZH+/gXe+Qqk\nOYbBQFo5o6Ng+mtuJH4sJn0dVjcuV6jdMrLd/KS+NalmjfOVMruclwtLRoiw\nYlG6DYiADQ31XnMyWUeH2rrUHiXtEVqEWl91mNa4Zj7HfdFkAoPMMGT7zjG2\n4DmPcAVuXqXJL+csI1EzGN4Z00uuo6GCTfeITvKcgZOxfrOi/iN61xQslxxU\nePnpV/xAYw6DJpqr/7o2XCdyGf3dIGL6DIfooKd1yklmta1pMJm+NnzVQ72x\ncI0dKJua2O7N2wTIRccNbZtTo90e6gE/yDeuqQiZTjmh4Rk5bCNIpN1CvO9m\nueHxnIljnQZi+aT9ud8vThaK/hfidPfbiqD1/YtaCfe7dna3gHV4VyQUHbFn\nLEl9\r\n=9Slo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc6MlzTQfNxAPZDotsG88XGb6uATV+Sy4C594alL9A2QIhAL5GREUJH7bfCXpGprxqmQ54sgTlq1f+2iKN4p0oGGVA"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.756208fb.0_1629921041678_0.7030959869056403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-button","version":"0.23.0-canary.9576dcd9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.9576dcd9.0","@material/mwc-ripple":"0.23.0-canary.9576dcd9.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cGPl7ITMRzAiu0igL99EaNCy7y42G2Us0ZGVz1mvN4iCkcATINp36zNjM6oIyV/7aFIWcABePSbtmba2mUxfUQ==","shasum":"227a6927d550eeef5a649f6e631343ddb99ad222","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.9576dcd9.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrmgCRA9TVsSAnZWagAA0rQP/iqiE9jRspvjFJvSgjQv\neUKUjYpai7wvHOi+vUUqEqCFWGpAq0ZuhXvoNQLffJFAj23gyKfM9xSQXBHM\nU7Su54Q7iuG3Z8WdT+L+sa3HYn0F/CvsPk+ylmYWIz1mBToIu6IF6WrRT+DV\nD5A0pD2aqnnMi+P1KOXrdHVGoMBjtdiMojJXLcBdI9RRu3MK9whrAzNppKLi\nCtICgnHnULXya6EZ9JhjOJyxNJOzrlxMKookjIe+lPoJEus/aGMLNLDsztoz\nxC2Jrd6AET92alAIYjwik3dqgrHG9FvfTPwrtq8m1ejxHF28BSMnfewmooxr\nsK6h2gBSMpQggs0xjw8kOi4FXw1VYg6BLkwG3Uwd1QpkGocOCf1/auk/LIsj\nXaWa9FJYaRZMf8iPpTSfrwKc2StR80rW13MCwgoqsbHyVWIpnGh+AYddnEDI\nKGzD3Ird8g+XToPY3Zz3HKXJblRjdTMwkwgs5+yRfsdnS5Q6oF0MoI82lYDf\nEmVS0Ex8U3+I6+wBByj5qSe2kuUq5ZPLuNz3Kp9zJRcm70+FOZruyQ5JqRPM\neFV9XuJo/iLW9oTsTU0JLqFzBsD94b2AiUoMOduCJz3k4i0MeLwmvvRMrC3w\nO6KMtPrREdZbiIEW0bmpWfl63/eM3AF+k7GN+QkPBoAjfUhka8D42uoJP9tV\nteRj\r\n=QvoC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbWxmBzjpGp6BsaiGa0oDZek8hBXxgrL615CEEWUw+NAiAh+1yJiyV3FgSHilG2m2QZFgSzZXyBOutdqN2W3/zQ+Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.9576dcd9.0_1629927840194_0.19672186815085158"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-button","version":"0.23.0-canary.7531cf97.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.7531cf97.0","@material/mwc-ripple":"0.23.0-canary.7531cf97.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+cCHgSECxAmSywjQgt4W5nWldll0RSKFcuriJNDZboA/HrihR+fxHn6DpTgBKkU0yZFtIPVxZibcvmHFgS3flw==","shasum":"3899ee4266c80668bfb8d38c74501344f78c1136","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.7531cf97.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ862CRA9TVsSAnZWagAAJA0P/3/csTzypRA1He++67VR\n8QmB7xgW294kZr/ddtvhntionMsuiR0ucz79wqz1bYp3QamQ9OvRRSMU83ba\no7P6Jx7lIlHmpyFXbPlRXvg/OZHBEWr5wE0eQj08txeitUW9ayKrzcLA4wSI\nmUqWt0gtN1shTeN8sR6+aI0NyDk4Yj91TGWhDqdPI8SGfLxsZbtzBP00Dzxv\n+aKmazqBsub2TjYoSMHIeor0U/ktR1qLkQcijSpirxhsZA8D+HjLMrHyOhwA\nCHbnerv/0EupkUZvRtrv47UiOWnOKsNL6Pcd8A94tEgXnYDo/fD+KrYOm8a/\nNPSZA0BIfW+WqwsixD7LK3vSbjQ18RBvnLvd0+8FsPdObPWjU41+XJga4ux2\ngvxUsA2IWla+TUatRoClCI2ad6F7daxU3DMITYseH4T/CHE7k4uiwN37HAtm\nUNGagtZknafuBGaLSgbdr/MpFaIJvW0SmZOzjr4SNrsgY7Rxy9jTIHvKYEpX\nCAquYeW9YUc6ngYnh33kpZ83US2qN2oF8kue9VKep8H2XYHA1shamfJKNVgj\nt0HtA26o/R08ZfPofEV6AityaEDUIEG+taaJcSJaDSLZi60m+eNMZA/s/+O5\nNGyAFFPWSf1LB5lsm0P1n/eLc2NKf8B6ucs3N19D+4qAH4MUG3kpG5Y4G+VI\naHbU\r\n=jjij\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAF28odsquX0fTFT2WX1PiAmw7Q/dM5zVlSyAY2pyEeFAiEAlDRfbRJlrU0bjlMOS2YeSwvb1OmjJKiSzAFJL3G1mzY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.7531cf97.0_1629998774373_0.8661980955074198"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-button","version":"0.23.0-canary.3bab26b4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.3bab26b4.0","@material/mwc-ripple":"0.23.0-canary.3bab26b4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ukc3ZBsKXqKkKz9Et5ZNX/HfqU0Vw/r+k24EPQB/TDaUPfD2B0EC3pBjJIiAcgF9s4DuAw3o41z0NLFHIZupcA==","shasum":"28e5895ebd2e41b3680b474bf843cffc6dd41e70","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.3bab26b4.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtVCRA9TVsSAnZWagAAcc4P/26iSelz75YJMLbcw89/\n1mtyeCmNd+SCO68SsJDElDPWq6ih4otf4qsPV5nJHmuGxj1Bh9RcdyfasvK3\nTm+MEfsjdVOWvHm/b2VrzGR/jgfM0VavIjcaAkjHWgRcZnlMG6+or8/v0QMd\nu2TaElFsOTbl+Mi/+u+3yamgDzdJeqOieBdVxyMCSny/4pHYDzLfQ1105IDe\nTC06XCfkhY2AmpTj8ttYtVJGfP/1Jh0Hz723E9+1F/sJxNgxC7m3JuvVNsga\nyOEPi+Gvugwx4XybF/eilW2FP8/ip4LLNbeJqwMug5D45h6hSG41XSfOjrbH\nbG7pTttWZKBTAC7haZPtoy5KBy+VqH4R4oPD9USn4sc1Pbqgz1aLADbs+Btw\nLR39wCR9UwINZAmGTURASVb0XYXiYG+yjMoFUFLLkOZqGIbjkzYrtXdhXJqc\n8PNDY6I24sGiNhmkRTlvIYq2lyU4GaPs9BjsEjc6bewEDyYCbUTGh8Cpto5O\n1fGGVDKMHkVGcCfIO6m1RISKgSWbZI4avz9xY+HNGQ7sKn4eixymn58z/hG4\nfGfglYKpkTYqWrzIEfRHE+ATiiewEYqgsTxY8X4uHeFXV3jjm7GndiK/28Px\nIB20mobRgP8BZSIIeZ/nPBBsmwq2pOSmd5tLQFwLHhSggdxxqZI03+HiQLR+\nPQrI\r\n=OAJL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZD4XddZLQOU2hmsh03IcvbK9h4nHEf4Hfz0wEpuSKPAiBMFXk0fpQfPYB2iMiPfFr1JPZEDcFqA1q172x+h30mZg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.3bab26b4.0_1630014293541_0.960971384535118"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-button","version":"0.23.0-canary.fab48bee.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.fab48bee.0","@material/mwc-ripple":"0.23.0-canary.fab48bee.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4FziCpGeha8+GFnD9zrtXk+j5uAUXgoU+eQpTv9dxifHfB2OtKs8HtBcqpeBQMncE0pKeV4FFz2rj5YwPVUxeg==","shasum":"720acb9aa07a4c42648d1277d4852e596679b745","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.fab48bee.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBCwCRA9TVsSAnZWagAA148QAJ1ZOorO8+O4Ma7dFIRz\n1MU3pI3V0nsawNtNYjabHMzy3WpSMzY6ckMNMt68DFVKAX0yjdoQj2r5DguS\nhdIOV8qrbw1vPQKTV30LRLexcLIkKJvshUn9v782fKZn81KRRF5eC2T5dd42\nCmo15jGFpqWMWiAB98tmpJYCjfem6+Th2xYqUkFjojGQjl/+bRrGKGk1fVSH\nV4MmIVtJxTcbL3DNUZ1MO/2Ntb5KQPZx8vZKX9SUv07t46tJWMLm4nJTntza\nCgDG1sz/QVuo6wW7TE5ghd0JhTpR5npz3TqLju3VGoPoHDC9ykrmP1T+RwRW\n0DdlnD8wFVLK8kgk09d6w7m5okSpXm6+ulpQCI9xAgmrV+mX0jBwPo9bOreh\n0RW2FaJuhF9ZOyC7VUHMH9TcT6PmQX6ysbfA1hq9HYnwJIdddxLk/KoYJIjd\nQ4+QWmGZ/GOA5QZZVhk5bdROMPVWykDyHvlGgnFcRe8ODpejUmGoXmFi9X+E\nY8XMvFc5+r23u5WMWdhDGLlGTESACbAQe8NShuetvNSbARiWOVAl1fQBxgGR\nsiLtddVKP0RILhW8PSIiqhFmHb+9RbpsMLafU47xxTMPA66+HG7wdJgaotw8\nQm5f1OxUd0bNTAykbGypJv2S8c4nMhUhxSAa7mhPSIeRQyjQe85eSG4VjmZd\nsFLB\r\n=CQ2a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBP81PLlF42YQUxF0vVqwdS7xa1oxjj36pKijEvQTGNPAiEAtMFVM8qC2hrctVWRgNuv7a95EFA8IRZr4ZxwpJTQtvA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.fab48bee.0_1630015663986_0.9511653042256947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-button","version":"0.23.0-canary.dec18df7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.dec18df7.0","@material/mwc-ripple":"0.23.0-canary.dec18df7.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WbUdMdGQRRagKVV+AJKKIxnUCCvaSdTrE6AHsvdsYlgAPuckfmuH1m7l/u/Z6E79QK264m5j6b/0kBot+4RY8g==","shasum":"9bde0d9c70d786253885863e955b26925f99c9a7","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.dec18df7.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbJCRA9TVsSAnZWagAA5+4P/3xR/55tMi/8fm6lYwzb\n6fkSVC6cffMhwAhK+GajIM7BLaL00/PK7Nk9lYWqphkNIUBnvOAfK4ZVbmnJ\n1YaYKIyqgcJgcsmaCdrlwQaTGhowr0adZZz8YmelcgJRd0rNLIBsextAbrg2\nXfR2ths6uNbrOAf8pc6EmyAhcLbZt6VGITTKxJJYs3rU/PIKrgKI3tmoBrDU\n4wwuJGrM808RuaPCIM/8poGx3rqECiqgxVA2sFe5iroPOtxOV5xMmbYTG5RC\nZ87gE5eC/y6D5S2EkycUkGCP+H8lIbVVqTNTX3YARodF/1LJTJWze/6RqH54\nqAOtz0kZpFBywjrzEsMddM0Z6tZQhi/C2q02/69OV6wt3mikc51X6sifs8P7\nfWQlHoIFaX6UrQcSyHusVZwzuge+Kw5aEaWQO1Ee8Bix4Cr5UIhfvhcFfL65\nYYiqZn3kPBTM+OhnLZeSasjrHUxDgxkHZXXbLkdBFlOTBHqUTbiQLHpFaN5t\nGQqi7Pyn458dOE3zwhCw91TXDP9EWPZSMeo4EMV33FxFkVkocWUFyQsJFKnR\n2xJoSvUPfj/pqHtUUwZUmP5LokhzQPOBhBvnkEMKncU44+ZTHy2xDqhg49ux\n7XBAyAkBpJn8MuB356GjDteUVv6nnjQW5OGiBsXuRZonyDmARhz8qb/MMyzV\nCsys\r\n=n5Bo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzeCDa7KDM4mKWjw/06C5EohYHwCyDKEBQtVjYUdSV0wIgIjMbop0mTty5ZE8n/uiXAzP1Xu82gO6mC4Zu2Ecxd+Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.dec18df7.0_1630312137799_0.9789954272304411"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-button","version":"0.23.0-canary.61fe5b17.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.61fe5b17.0","@material/mwc-ripple":"0.23.0-canary.61fe5b17.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DNi5pDY43Gk6DsjeqGNYk2KKPcgSC48+zwPK49huqPabhtv5897C3SQzXAi6/TG71KQEkGehN5aHlq5KP4SELQ==","shasum":"c71841486cc2bf387937bfa6b16789b58b1b64f2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.61fe5b17.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTFsCRA9TVsSAnZWagAA5UIP/2/KMy9JsJrpB2wenHRq\nsJyzcg5T8rH34zDyNlpUG+taSXvUc3yw9kOGF9fL5au795H+GXNizS663ae7\npznYrjUClQcKm0Wqya1mgT0v8xG7JKung1/0k4gnekLObu9G+fhpoK5bedO6\n300OAVUoAya8vemnAwEeHX/+F3Zx/fYrDVlbEFim4eP6bvuW79Z1VNLIAle2\n82D6By+Qt2kXka0HsjQJESrSfnNuGbbnQR2MLjRMHNnUXx/Txjxq/ZdDlyAA\nzyMEGC5V4/LlCu5K7+uqZp8j8lGTvRxAP2tW97Dr+8wkLwml23W2x1eYJ/oF\nl7bawBz1bZDZq6Di0nEwvlFwlRNJ2iiZ3UA+l9qMwuXhOXhvlDUG11JwBXAk\nWwTA4teahM9PWXsO41cwSKJJiqaY7SdZx8Fg44ZHTotHWMo3R35P+XRz2nOh\nhaoxneI8tKGAvSvdRdqp+OiYEjzD9ocBcK/cxaYNcSIEulgGNqSkE3WXeODc\nxODmSSUHMo5H7N+IJLk4xlP75njexqcTOcOpcBOeHjvSzZM+tOityadsH9Zh\n/KK/7tWYnadmixqUFKWU+vCd1/JQEA6+/xSxABSQhi8YpaCrhuli47f3ermC\nqKXTD1P2hkdjhwoyVKGIHkaYyGnG+bZSOZ2QzNDvLHxWzNHA0ZHxTPD6YDr2\nOdRj\r\n=jjY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvf7vmcKcstgS1CH/hSMZMes0whlc5mxz1J828Vgic8wIgKdhcaTGpteKp673ShbVIGEVEQBcGVy1fVw6KHjjeFKQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.61fe5b17.0_1630351724383_0.9606614373345563"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-button","version":"0.23.0-canary.a8c31f54.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.a8c31f54.0","@material/mwc-ripple":"0.23.0-canary.a8c31f54.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HIdS5mNuaSIUpQFLqROKz8zYEAUTIgEnUyVcXdGgWzEAPA7L/yDm5n9lrF0Vlu7HUIG86BfeDl5er/hn3Ms6BQ==","shasum":"905f64554659b0d7c9963d478b83a24ea9f9cbd2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.a8c31f54.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUAnCRA9TVsSAnZWagAAo+oQAIK746JM6LKuxmOqMJNt\nxq7FOeVV+8dhPbQxX/Dg+8iTNuc6S/s+thhRMlm8UixkPmTr6ZOd+elU2gh8\nMSl/jN7pMm2uoXL1jiiDkbATVYkFTeof0WO1s6avZtxjZ5l7annK7CzkDGqs\nozYuWUI880AGcKPJrtPXfUN4FML4ZYWUMCfj7sKuom0odjqDxDJhiQ76AR0r\n9N5E0Kqqfx9PbSmfafLdOvDpCgUa0tYwIPll6dFjiVpxxeQc0Dih4D8wFIiw\nvT+ZpA0Ao9KRA3iKm+Hi7cPVYwYPJo7GOGZBdmfZej0sA8QN/OEwGX2jKArG\nYHASV8j9djUuzojv7T0IOsbRKL/OVw1Tcq8s4nzRd/l0ogBlo3gOUcqKU46C\nPN5t2kphQK0ZGLdqwl4heDDK9WWRP2SxApcDrQnelssXInYW/ZYGFU0nSdO8\n4XD3lNp9hPD2hPoDUgzqvLQlmi3ZjM7cALUqHrSRH+1M7eD3NV9TODx9IgIf\nYHYCwUWgPFe0E5RvZgWwlfFKhAAuPlv1pVIqNdFmprA2f4pOe3xKq8ZwGyQZ\nO6XVDAaMzHCbOhtoyTVUDI9yJtSjkYhpF889KCwdM/t8yt3QvI6FnnvqdlwB\nwv9PzgskDalp9TWZdWa87GnlE+tC0wK7JQCBz37XFprN6cn4e6f4n0sSHO/X\nPjR6\r\n=btCc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv7KY6PpFzX15xtp7EcsDDLVPeHdAjoO2sbHqdRFCCewIhAKFQIt7Jy+H7Vjuk3ockG6jvkY0z1H5olg2r671YcYwZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.a8c31f54.0_1630355495092_0.2777244422935379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-button","version":"0.23.0-canary.a096dba8.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.a096dba8.0","@material/mwc-ripple":"0.23.0-canary.a096dba8.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AgsAGMlJMQQw1/RA7mkSfB2LymCRwgI+RpOzxeEdCN55VUTrFHNsPyYUt8qwrFpJ7jv2ETPJt4ui8SU9vHLDaQ==","shasum":"aae4b6a5de147900235aa181c38f38bbe7904f14","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.a096dba8.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrVCRA9TVsSAnZWagAA0W4QAJABz6aQ/8+KGGwT5hV+\n3rGAfcLOGBlqdwKAfEdmSM14xbjIyj3g3CShoqvAreuyWgBX2fNTekLKHs09\n418Eo+ugfns61I+lA/YUl9w7xaSQH5/LgJRgY//kyPcGiqOLBhZK3tJSXfu1\nz7wfwbIR1yklW/OmQ7aPazo2iNjveBr92QhKlpQGJ1KgRSWP/WOjuJ3Dic9h\nLrB19N4qXnVGOMA5kdrBDcvyTIEPwxgCaliJL+icoF5tX+8HHtW+t/CoKL9l\neOxJxg83fEmyGCMw7kZjnxXm7flU1a6sHBdLhK6PrfWRDnOJF6Wg/EBhJfkM\nXJgKF7QXqhFDHiG1eIRqqEm5M7uqF3A6AE1/Y7hILnPJ5hwnt9uIuSqL0iCe\n+bp+oWY6sCDlpL+KeXmP5O2anmk37/8cvdaE4bY09d0xCv5yjvGxPNpXFKrL\nq2P9W6zkAnU41g+fr3G7Fx/b/91Dys29Ji9WcVtzKSpIZGB/cPmWe5VQIv1Z\nUM5VqGEnf+cU/c/Jgm50pUFuhawoz8T3RNVC6RP1mH+9+xSCaTav5rwLWwTc\nufA1et3Ppf/M5O6X0uax8JThQQZnvb40aN8J43b1SRqUbAf+TDv6FNAcOHrM\nYtdLB4Ry1Cemh2ijCJkNw6YOB+sgB05QzUnIY05EKTTCgdtYBSa04pi2KqMd\nrF66\r\n=UBrx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4Evu4sYe+72Y1zvk9VV2i2qS2kVh1Fqjr41jEFSleWAIgTa2Lsfi/752HkTeuk+TR4qEVRrVtcD3elbBnWexUft8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.a096dba8.0_1630448340836_0.35099561986078065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-button","version":"0.23.0-canary.7ec04d47.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.7ec04d47.0","@material/mwc-ripple":"0.23.0-canary.7ec04d47.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MCbw1T/c0vpW+e7luFBxaKN8nrAsPXkRCvZFiJ/9BOIE1Ug6Lk06S1HEOa5bg/F5/Uc77q1cem0kyDm1BoS4+g==","shasum":"0203b064f9787c4fc298d13214b8f830fc057f3e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.7ec04d47.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV1rCRA9TVsSAnZWagAAmmkP/jADmch9HGf2UJNwQrSr\nTz4RijbO5guOJjmgFbnD8qR89Bda5rh2HUu9A/JRMOBxCfP4rXPnOmwZG2gJ\n6qzcVB/COzS2ZOmSCpEEi/63pbmk+cp12fDaOiS6czfOjdHY4oFxG+hSOcOL\ndaCfntEEUqdiVwneXjzolGp4t+CagEsdX/m8r/oVjjhOwq+5dK8MYRBYs/P8\nENoRlXiF+H+/Cs/C/l1vmiPHk0mzDUlStynGg0h+zz3+gro2lpuNJim4riEo\nRVrPo0KS9Clr5+SrmEYa2CY7oJHqbWlUQ2so6tpsmfm9XNEOZ03CBGjaSTpt\nAEPv6isQfTJ4P3ZE2Qz2EMbRvQ/rL2E+j0ro0+ULA1Xfr0U80qUV8fhX/IZ8\nwPA64c+eQq6bYglgc94+bOWZhaZgqWB/Cy73Cm7qvipUHdrTUSi9Yu9Hm/rI\nmQx5VxDbDfJFDUpmoHBRSY4c4isYvHLrfyIar/4tspSqo2CSRlM9hMpMGRK6\n3f9WUNI3YWHidcy8TcfHCrE0gutI/IdAYkw7079X8xnIjHhf7UdkKOyvYbvc\nnnpdYjFL842yHMG8KYd3c2IRxi+eo4tppKwTRlQCIxsI16FjCim7sJ+55KMo\nrvhE6s1ERmxS9Mjp6gMz+Rq/oyjFfNqyKATHH7jzbgNcbmAXkBE2KoYBkT+Z\n+IJp\r\n=LmGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAXHhBcN755k1mIwgPEVZtoIvhruU74nB8Cuyi2MGexpAiEAhu9OOQ9tFJ0BbMcMCohb7D6hb9gT0du81ImyXdF+fPI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.7ec04d47.0_1630625131391_0.6154769469464341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-button","version":"0.23.0-canary.d00b098d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.d00b098d.0","@material/mwc-ripple":"0.23.0-canary.d00b098d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VH6tSqvDGfEU/UrvUXn8wiltXezUoM7x4Jr+6Z6iklb8Gif6oKJi0+x8wcV5+hUFNws1khQNX0gsPW/37U0R4A==","shasum":"c7b7cddab1a3d6bcf9499789061c47e3841ab4ba","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.d00b098d.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMVCRA9TVsSAnZWagAAVPUP/0+afYmt6Wb4ASmBzn+R\nZilg/cNVhEyYEsO0qN8ffF/MI3IR8c4uCS4gC+FDKUibC5j6yffmPF47pcT9\n8IF4ojbiIP5zIAiVKb5ukzIUe32aTLf4juvfo0WitUXXoOBu/Eo10EsL/px/\noRMU1q3+fb05NqFlNkT0n1/p+/7wwLpWMZzip95e0MNsA6B9rO7fnoduowk5\n+c0xyBLHHssIienpzsItak+MnEji3YR2QlGTF78JMMBPipyNEguV6yo0m/Wc\n5tpEEcIr7XuaVY/1E4TNqPEgYVAi17+q7uDbzHfMJnrM7KqJHi2L3xg5StC4\nrdi4DWmFsTUyMzJmw41TPi0l3hJqc2qjC+xRMTnszVY2YmNdvXpQiLhiBfxN\nmYRMgzmVDVclyFn07TjQjxwwS9rEEUR1+Jeb+CH1t9Uu6el+bOeVN3ikYO6u\nRsfLbT1bWSYKqYIcrgnP3YvIhWKoqbbRwQBw2vobSuCgrmlRX4YRNs8gwkaV\nqD4qIOi38rjs5nCSZ6tvoFfI6yFLp7eAlI5UDOSyDFgFyl0h8C/304qp+x7X\nw71vQRDF6V+8u9CLb5il+hqtvL3c7hL1qKrj2C6kXPJsXur7jqYVIxpp8cWd\nOcpCi2uSBfADjqJUaKYQb7f1Rfj+STYfGZKONfv8fheN65+uF7J5VqnuLQfY\n7upU\r\n=P+yF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUKllJ8rRdbQZpZZVmw3CatiyW+gB4yVLbKaGfsHbArAiEAsw6msce5wALI0kSTXB54DbF42dSv+kiZ3FmKxB7qxHk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.d00b098d.0_1630704404923_0.40807994126293123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-button","version":"0.23.0-canary.f29b3352.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.f29b3352.0","@material/mwc-ripple":"0.23.0-canary.f29b3352.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XnJYrkq08BhP9gDyBQCGkpQ2Je+2/C7TajNYa6a+PhFnuCkbFCuK7DUzAvQ7rZeS75NFcdyRiAkQlKouSy20KA==","shasum":"bb80df84cba12ab54ce7b963ed60489e28555a5f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.f29b3352.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6xrCRA9TVsSAnZWagAA5isP/RVvF7YykW1fOspK0XJF\nHdT9zeRAoXbPKDZZrzxKm8mnQ+w1ds19+newIO0den/kOyl8MZ3g2h3NYLA1\ngCSQS1TeDw+Xny0nvfkSH71GaNzz76lbNgu/epVmz4F+P7VrfeYtGLMlG/22\nBPipA7i6LNm/YKpT9r82A4SS2GZxhluW+BQsEbH2L1YRNuJRvQL0PSWhpD0t\nI22L7bkHVPGmRXEu1wTaiNpGg8nkOxVWfEe3kLj/57ID6R+dt/WbhQ6gu+vu\nCcR5TsCsWCuYDzgrHP0GpGz1Z5neuX0GKt+UpTxtGzQIxJGTOjKnZsSv+4WM\nLKtDjT5QaQym0ng2IXEukKVJ6pEa6S7nbyI5fc8nKHiFJ/+YJIZZRFDH/eO+\nNjUlG/1D2zJbrQEkSnyIwwL7cxD0HeR2tvrge1gCf/bgKcd1RXDWW1WuxUcf\nGTZVfbMZ1g0IEFwaoFLk56R0bP0HsfNeBngOmxSyudVVAFMUfmaO9or6lY7Z\nw+okA13uHBsrJCKAcESIgNcet0U3kUTR+dZRklzPf85O8kGYvojvD/OFVm9a\nmrm4qZfQaZdw31+UfejpNSg+VGd4840A7mbPKGmG/7tNVyLswOP5uquGZNaC\nQU/NklBT6mmtamFgCjQbbeveiuhUfbwXCLT6QCqBcRE8aa4zTTxiJIH058lx\nRX9e\r\n=uOQT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsY75fIcwFRSYh6ks1jBy6a8yj84VC7H3yTlnjQjviKAiEApBv0ZNQA6D/0tzXWSEq5YYGSPZhWEQk4/iL6Qf18hPE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.f29b3352.0_1631038571526_0.32668411259850294"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-button","version":"0.23.0-canary.4962a163.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.4962a163.0","@material/mwc-ripple":"0.23.0-canary.4962a163.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pOS9kQCrlCsEeKEz2Qz0h/PlZp8s1/Hms0kjhNwjwE3oj/F8wZNPw6DZnezsLJTXLIE0xNk5LlLfHUDAONssGA==","shasum":"bd22df74ba5e1e79106649801cf79d6e11f890bf","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.4962a163.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/t0CRA9TVsSAnZWagAARI8P/2QPX4Rfrk0O0X8rtvum\nq8SMFYfmSl1wgB80OpszwGigTjHbdWRXUwDQzAYYoHvBPVvoy2c50lfNgv3U\nhODHK5RtoNK8pk4oiBjtnd3ryyrSX3G3Fguwh1rMS8+tV4ZsUz5BEYgBuWa9\nSc4aOlgRrAVdI7knyEYF1lMUKHjex77eW7KDC6ntcG7tgLqklbCMFDKWXHjD\nMbmXG4zczkIFP4GKh36YF4bc4e2r26ZpMfhK8P8S9ko3CTML9kG6BbTpGIgr\nL7wgkfdqM1yuKQiOcMdPxVn/EZZDu4spOJFRo4wrgVw2MbHJ7vIrEWPH8Ndu\nvgvoJb4tVzYPMrmIJ3XNJ5W9x0YTpfLihjvyMkPN4Rm7ke70y1dG8Zd2AA8V\nhBrercPDr9l2ZZoeMTZTpH5aIemZqiSNw77lRNL2v4egDEh6Dpb6KSiKfbGs\nq3/+v8SUcQN6m1JRAhKUW5v3fgXNj8/PcLZNXWb9uisRnCuqnSAc1MWTcJGw\n/ltKoc461Y0lmuij8d0Fe6RA+x0xSZKMwh2cMfftlvWbnJ+JY+6M+PMPeC/3\nteuLFCP6gmAy74bts7QiuPsTS9X9AWICdOyIM1vc/VmSCK5hEfP97pQsyDzM\nIJvYnnulyW4TKnl/qSWXUXjRCiLq8zl/7ZyMlhE4jWxhE9HzVkYWa8LNKnyt\nnxzs\r\n=FPr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH9pxB+6X3KEwT2Pt0/MO7oq5wl1H05QGCJJsc8NE77NAiEAlL4q6bBOIcKN1jv67Kb/s8Ah7til7m7ZdAqodn0c1KY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.4962a163.0_1631058804722_0.5073975111686144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-button","version":"0.23.0-canary.33102bf4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.33102bf4.0","@material/mwc-ripple":"0.23.0-canary.33102bf4.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.15981e9d9.0","@material/elevation":"=13.0.0-canary.15981e9d9.0","@material/ripple":"=13.0.0-canary.15981e9d9.0","@material/shape":"=13.0.0-canary.15981e9d9.0","@material/theme":"=13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wLNVX7vw2GorBCnkmzwW0GuPkb05VkicKsxwKEwO9BS2Urv//mVS3VYvwmecCkdJ9JjETQKmYmdsRi/bngNqeA==","shasum":"ee9bdb73aa9235f016731534e8f946042947bbfe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.33102bf4.0.tgz","fileCount":20,"unpackedSize":82221,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOAAwCRA9TVsSAnZWagAAAZgP/jvZ1ZsYkH4fhTv6OJHO\nmRzBAtREabjVCOed7vh9dyIs383gdSc7itoXOk00a95XgVZlVmLdqm9pI+D+\n1ycMGknU9ZHNty6pXy9GTLWCavircFUq6pt3zoBFXLmCqoODTbaDatWwGpMP\n8fIqyKIBRNrfJMaLAU+N1ii2hVepZxSb9EDk9vE1qJ/6XH24chQouAs4ZhA2\n3vMwUOv8Wszhxr6PJc+CQB9aRNcGA33hL6JuCGArjy8tgirRvCjKgzvmYsfg\nC7hdX5XGsgtWfaway5sbhRo+GzzCJaF3y4R+YmoVQw3pNwO+xNQEA31GxjyP\nMU7Bajp/QeW3vAHxjVMZCThVUbzOax+Tyq4oR8u8Wg2ZKEP4pQwseSovCI0o\nHF1RwUjnUrAYP26NTH4j748NlU2+mAr5pLj3xlIh8hmrFv0FsayzWdaDfy5S\n5o1vI0nFF+Nej7QhHn6PQj5zpc36Qb6jHczHnO7GdTjg4j5ujY6stCbWjV4V\nyPSVcjtlkp5M4IRkc1GWrb4CCImBHh7QvLoERSdn7HJS0019ogHyRFokOSTG\n5215b9PJ24f5ws5BnZnyIu5RT1+cfPVfEBhkQ0WUC9QiDIPeeYNvJ3de5Lk5\n1tnucCOp16ASFFe4oSVMSlkIdx3dVq/iKYKHel8BPR1yWRBkrrg/PQE0V3uG\nXIqt\r\n=9WeE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBM4ovUU1a1lC9DYPJUh0EJXiKwsbpV+jGazqRqbowHLAiEAuiAy3Z0U+1JUoWokUR2JHum91P/nrcRoLqmQ5J8fohU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.33102bf4.0_1631060016072_0.9518632586715812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-button","version":"0.23.0-canary.76c68381.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.76c68381.0","@material/mwc-ripple":"0.23.0-canary.76c68381.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.72464476c.0","@material/elevation":"=13.0.0-canary.72464476c.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BE+O/P3+gN0PqPL7OHfztEO6QPYvzPPYrdTQ+dvNF0C47so3ohzRGgQUQBb3TstCiyP6wJHV9YTXA3ViyZL9TA==","shasum":"4840affdadd6bf03a5f17ac4fbe11f65f255c0bb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.76c68381.0.tgz","fileCount":20,"unpackedSize":79939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORl7CRA9TVsSAnZWagAAG1gQAJCtmPfNhgDtXaPLrD2g\nE+rciKx93qQzd8sd1jRo8Ul9wNH5CvJPN/VAoC4luT8kWmKyWlHGZRza98fl\n+XdWfkR+uLT1tGDOK1Zm0umbVZ9THSSAv8K8Qt7BrQgqg3ZkmryEscChwCMg\n6LShKh4yFnlnLT97gKKBx5JFrzsTLSdAzKIsG0EWfMYg4Qx5lb1AndTnHaVD\nessNS6bo/aB1JY6Kb3WNkdXS7mzjuNCz2WVb21EY8DO86qpnY7dlHDI3GAZ+\nQJjF7vYcMazzKeQyIt7tyhrUT9m5Ap5FbyPi5+3Mh1UBbWaEOCD8C2Cqk3hb\nMZECrcSFqyjqdEZpj7a3X/AJ4eoP64cI74QxnLDspZGAG9fyKATv1eSQwR28\nkihYnZA489wWg0LT632vr4mKWU2zfl5a77e8sAZIaYOuI3O6oiosKO/E76AY\nimlqfpZWa+1ki/AkqqcmmcQnRGT6zZFw3QfgT8F9lD9ecw8Mhb96HxZUQPyr\njNcLsoq1eaaWoEbPn/XEJ9myk+7PXpMVpK92ua+e2D6eFpp6uLmjz6fecrT8\nqyevbjmacbYECSsOZhxL8Nn/jCspn7I861pe5tetmIYT2QVlCquTBCmbc1vG\nbzt9MamEBmTzhDuvSY5jx4wSZ/0Nw7bR9txgiwVDGGNd3WVExVWbUioSwjez\n+PMl\r\n=Z8kb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICC9N7uZ5HU6MPtL+xsp1pRu+elDkJxekrHm94rQyvJVAiEA1ktWtiguRDGsCDKGRUmr3kyGDei8lPLmRkgvxTi+tSg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.76c68381.0_1631132027413_0.722125710939358"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-button","version":"0.23.0-canary.17d51f76.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.17d51f76.0","@material/mwc-ripple":"0.23.0-canary.17d51f76.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.72464476c.0","@material/elevation":"=13.0.0-canary.72464476c.0","@material/ripple":"=13.0.0-canary.72464476c.0","@material/shape":"=13.0.0-canary.72464476c.0","@material/theme":"=13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sF35sfSYs1COet9DyZUKpuutkOc9CDJgcY1H1MXJqUvHVOjRcoHH6ngaQm0Hmbuz1fnbgLnih62HE8+nSoj3GQ==","shasum":"c9f0f4dd52f6c2b88cfafecbfe288eaf54fc2ecb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.17d51f76.0.tgz","fileCount":20,"unpackedSize":79938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUaeCRA9TVsSAnZWagAAeIEP/34/Sf+Po3m/4oXGxdva\nh1Otm2pv9iBcY0H1vazu46HeEHYdgp/MQ2Bl4p9wcFIWTyw1FAaY+9z9qZr/\noT0WfiIAiuM69M3PVxXhC45O9JY3rfOS6mLsypMN+4LmVmK5V553XH2ohY9h\nND0ev75A2m+WGLBHsUvxiGersNNp0xJxkaqJvTrzIs/fqQFFMBrS5/5l+6aX\netDu18PpWpEVEO5kEC5hKI+IcohwCSiQgKFL92Rk1hgK8xxMlm6TdDP6XbJG\ntdebYATFhgwiohP/H+rnT1WQWS8vM04mxNIIZ9dI6wAztyhoGrWPTLxLZfqc\nFmw/SXLJHeuWkJ2BgMVz3alxJqD0IZCTuZUjcjkPLjp/WnKSbSNOEfLMkIhu\nFGGNkBYk5B9xHHqoHcSEU5M19owhee28iGRPZvFt6yn+J0+VeezsBdka/b26\n8LfhD985rowwwL+f9DQmvydoK1gSjEVxH0Uc+GjqV4LjfqJFD7eg4Jh+HCWk\nN2rIROqfw57EooBE0M5M1PW6bMiJxoOZOaLybqlQLJV9A2hnwW5+j/iKw9s0\ngFHtSwX0Fahz9A8X9wxqcv171eLCi+6qXa0fkV+gM8ad1cumizxxIARZRqeP\nDl6r8xOzzqooYImUWUUvrgc2yzu0be1h2x/UvmQ7vHf+bk4t9dMlztM1bxoM\n9HbI\r\n=MWYP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB55BQS9qQGycmUk0BvfwkecF7Tc+FPokF8KnMVB87V4AiEAuoKoMVB46LErrtcLEwMV5XfYA03XexCubOPIIKLLVwM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.17d51f76.0_1631143582381_0.6901766402112917"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-button","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.3fae6c2d.0","@material/mwc-ripple":"0.23.0-canary.3fae6c2d.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-BPW7Zpxqbc47jF4+Zf+z7zK5uC3b6aJimNCJLM0LcJJUixp6mcK94rQIbXvMbQs7mpj2RMOJIRjqCUuxE6z7IA==","shasum":"a21cf8a35602c679ff19143b7a84e32c0f08e17e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.3fae6c2d.0.tgz","fileCount":20,"unpackedSize":79938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TZCRA9TVsSAnZWagAAglgP/A/2/+jzAluf9Mxp6BJy\nHoP3bgeJiHorXlAFVphkF31bozUP7i6aePhVXFA5CT3uAQiw0E7zRUgLQwkz\nZi6e8/vGlXhfF0vFQcDRpCUxxJRu6Pi5eFaCflVSd092IpI+MRRfZD6Mb/TC\nUjpvDO/FcAdCP7/MPSBG87JUsMTbYfd/HvQne3c9kldi+EAYdwXcirI0B0s1\nszwScxr+ZjJZYxyo2WNEZ2aFAAgQU52fZEvVwWUiFRjwotZTMe36+tNrYi0W\n9Hi/Fj1lRpNAjQxW04rO8tcsqUZ8UOFneG2npSZEWoU4ALFdIV/k3kIaR6WV\nFX+SOLuJMY4SaEA0L46+5KAv8KQDPrk8ve+fe/+kMjl/V9seVLqRfHyDDUFC\nd9LyE2+Mi0+db1svPaAH4r/ol+El8JmSzv423QsTRwa3P+YLyAV9N4VebAnS\niE09a01yBNh+lf3n6MfLZgeJmpsVqF+EMPPgwitfhTVsZRWaoQWIRmABydjt\n4CVdgJ7jLpwIqL/IKs47FpwbDC8b+Qw/1gumU8qwzO68rcb3fjvgkWk5pVjw\nrOeiCxnj1nU80IET1qaiGF11K2eZ6IgWrC8qK/7+SDFHx2qMOwGw9fdaE6Cd\nJkrWk3PngRlVkTZb4i+5X4r2oqlrwOouCNb6ombDeXRHPLHhulRhYZiNh/RB\nj/Id\r\n=qd4O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN/flTPrKh+I0IpYWzBTdyerTdECmcJu5HH3Q4jx5dkwIhALhdab0qRLmRKCRbIlRCCKvCFUjnhemHS+gZUWunR4Ux"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.3fae6c2d.0_1631298777684_0.2740067373426507"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-button","version":"0.23.0-canary.f1958c4b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.f1958c4b.0","@material/mwc-ripple":"0.23.0-canary.f1958c4b.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QXKRn0o2q+Zt2165u66tYaMHVGhLWDlnJ/29kOTxV4j+2RkNTvAAeEZlAd+98AGRGc+NitZIl/3v1lFc/P4UOQ==","shasum":"bc153c59b89d78e90172507d2e2de6099b0b7e00","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.f1958c4b.0.tgz","fileCount":20,"unpackedSize":79938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SOCRA9TVsSAnZWagAAWyYQAJEyM3FFI917GgvOHsd4\nDYjQp0CZIUhNR2qj/3Y4P+TIgj4LEmpgwWbVdCfEU6b2k78YQpTd9/yo16Qi\n0P6xIoYjcVmNUjEKqkPRB+GUX98D6heYbuSvZhaWNGNpxhl4o8D5e5ioMFjJ\nvwTYu1sKvKKc7CW/WcJjbAZbsmAJ4SBf4tECMlHBDVcJz3inUi+9XIlqj2H5\nHbQSIy+K9kKEJEyp6kUMywoyur1VxcMjtlBzqGFPJdApTVsIfVKa6h2rsPz/\nejOTVatZ9FAS/e8mAhCGIISmYtVnvUFR5au7CEizyfUHC1F7FMW9SghkCGXU\nLGcRdlXJ+fHqTqVUUWP/D+qMbNGS00oEV01YhGZhfILG28akGCjo8xFtVS1Z\ntuonRd+L2h3kiqV/pPfKGbj+a6d9dm4QybKClD4bOz9s4wTubo9vcm+gVWlp\n6eGrKxdQOO4Yeh4wX5wJrYY8mfTnNduys3h78SCEzEgm1IfySJYZZwMBlNH0\niHQw7ZH4udhDoXU84d0nQBqLthOyUwnEG1XM0REdhiNyawSkML4FICykwx4B\ncOjlFWQstILT7WXoi78y+prX/AwTvEodGRpDC3mCEKX0+a+/XsNd5VUa63R0\nKOeXGBK454eFOgEMhWdHyO9+u3QFoB4atSKOfGh3E/nBKjoQHhji8zFbVIkd\nLQ7d\r\n=/DSu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQXyKourQz56A8e2TRz4nP8pW/eReRZzPdiX+t51VlhAiAFUAsbFw65ClJRNOBcJW6XJp8u6OXW7mJWBZrgjVtTGA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.f1958c4b.0_1631560845843_0.12089493002619811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-button","version":"0.23.0-canary.78abbd59.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.23.0-canary.78abbd59.0","@material/mwc-ripple":"0.23.0-canary.78abbd59.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Y/DNvMSgU+yQYlhw/NogCCfTBvZnDCVCauvM8xnfa6YhxIAIOEG9PENAmMnxuoOv/nDqCnA7sPR0a8yQIb4xng==","shasum":"0dab03e6d57505df8969e03900517a5639b347b8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0-canary.78abbd59.0.tgz","fileCount":20,"unpackedSize":79938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8H7CRA9TVsSAnZWagAAajEP/22H0G/2H6lqL6Cmp98T\n58OmBX3gOzgNAsX1kPbVlbJwBONz9Sk1VwVLjeUbO5ZQPq2xNojnYp/PVWyc\nmeUHaYt5YYgW2BWzgjb2hgbmjl+bq+ZLpaeUkUJ5ppm8PyNUQStvyhJeFhtC\nVqEtCVJiGiol9ezGmjtP8cOrMkYxtCaLWXx9BitqPaGJoZPW8S2sHq3aCwQS\n7BhGg/GKhYcsHZx6oVreWttbCpuk8NNsQnfW42uCDOvPvAPXHuY0t7TvSHhF\nvLgZMZ+cBezFdvIl1oacAv5ygs2avnG8k0CVIipfVNuwUC8Rhys0GDFXn5al\n+iaQ9MTw8DdfRkhujojV4ojuXRJz0L1YxW00cSw8xc97Z/D2Q5IJXdRIP52A\n3w2x3BdHyXMqocr4s4m1ZZ+7p4hFCq2rMeLYu3daJdL9uQJmElolMrexTFko\nNUbDry1lF77Cs9bToa01VE9++pRypbfd0SyuW1i68dORMK4V37DQRXZUt6Oc\nh09BCXNpEHes3/kv8hnwalPqml0KEIaW1S+tUaBVTokCiXJMGI6YHor64f7f\njD91vz281IjKBlPmRHGjcr3ZYz+152PDoWjD7bmjL1yLWFf6HQ9n8Wb6QEwJ\ns7K4d2gA7h8wzePSwIHRGEz2COUzPRIQJSL5+YixJkWk2atPo6NZ3fwbvb36\nYjXx\r\n=ja5d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE3Y5q7eB9MpRplmZn3+0Jaq11OwrLjajERoabqyzLzeAiEA/gfx5qwK+JiFmcLD3zUMD+3IfsrIziBQ/jFEgaBEgKg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0-canary.78abbd59.0_1631568378879_0.09594608892454337"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-button","version":"0.23.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.23.0","@material/mwc-ripple":"^0.23.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-wNuSzHO1rT/NkVLqPj78ydgIK5OHDaCNVgzTtq85ozqebjwVHfSJ/1IVaqQsj6jpbJwGe3+Ap3QIF97X5wC0xQ==","shasum":"c19355830496e95ddfd8c26773eea409c1a4d676","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.23.0.tgz","fileCount":26,"unpackedSize":106325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8QyCRA9TVsSAnZWagAAxB4P/Alzdz6jQ1WuG2xY5I7g\n7mDkYZI9aWaGvwXtdxnUrXvVRLzbC74KsInYMnITu9Au9BnTKgAp4b6Vlu2y\nMtxbsbq/U0xnB5VQWWbLaWfpYfwRLErRh42Tet8YlIaHfmJa0/oM4YH32yuo\n2fiUeZuWG2NF+nWZZLG9jBuSLEETgW/knhaO4+3GF14/pTniNDRKKTR56irC\njWv1PQ4AR3Db6enE0c1RpqsCEnJYnvW0qNxAzm3mXANMn8hbL8dAOYMARAEf\nrK8yc7dHJ68+9N2bjVxZ1qr5pIRXRwhC2jN/9g6EnhbNAR4xbrw3cFAa0DxX\nnL+WcNEoxBrCqByRMDmVmJssJOZA6gHr/Pi2zMKl6OjRkHVtCBoDG8QHt+2G\nL8ADwhyYjsu5+3K0TzBPm4p3BG1SsmpRnerZxDPFXlDBV7RqAUs6PJZEY9WV\nTy9aEOG/21oQaH3Ok+u2FnU2TSo4gdg9qX/md6gBBe15t2s0zYZMkcotBpmT\n035s/By78EMUz5BlzIj/Q0/MiRjbPe+e+MOfTld5g4N6Hi3R+Xppm+p6n85q\nL1oqKjy6fXk4k831WKG+AtSfbm1szpHwaXhltTVV1heT5zsWfp5YObUIV5WM\nqW8Cc/1klF0I1DmUNddWhFNo0o8lAa+T05EiXbLDn1xgZmnRF+aKFPqd3Puf\nacyR\r\n=KwAG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9dtjJkH7hPtI8cS228E9okWE9+slitaPrClxy2oUE9wIgXy1KVbEMoepQFUfTLIJuH/YLMnDMYciC/MmydNiSOtc="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.23.0_1631568946698_0.3500681266158736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-button","version":"0.24.0-canary.9830d665.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.9830d665.0","@material/mwc-ripple":"0.24.0-canary.9830d665.0","lit-element":"^2.5.1","lit-html":"^1.4.1","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tn1g4qgnnmtE1jPTsmW711Pb4LBEzH1MAcDR0bfNnm4NHlG9zq/wkK6nH5PuZH/Rop6FvazFSUENWrlom+PLCA==","shasum":"c18c6309f7515132494afe48f1132651dfb6c6b1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.9830d665.0.tgz","fileCount":20,"unpackedSize":79938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SFCRA9TVsSAnZWagAAg9gP/2xJB11k/M9mbOvNqXVo\nbczqEolSdqlkvvX2i4PiLUNHTFLV+3gJG7CIcZpwr46ky/lE71U1Rf/YtQEO\nyUgSKt2GhQt+h8Kp5qWVvXNYqmTotp6z2w3I343kKHCMSRx3axONrO96C5KA\nKuhuIBr/ygFHfS3ZPzuMrOwVUJu1+ZvyJTpJfZKFntwU42kl2OtA2NzzWGtF\nGHbx1kofJUDz2SKoP7tTJSBtdAFeR8nVF+3xrr7/a8Bu4WnMmfsD0o70rOqS\nfrLacUlXWYcU413t1hhIWGCX5zfrguA1zGTLR4ivt/1OHCCdJ5sdUgeBcNmP\nWOWEdHVeDYnX+j/0i1RVcHvfSgZvGDO6mqvi93j0KQ9gMGPm9faL3WaQ9Ne4\n9knqux+8bj96pRAP+LaDjrPF12tHM6nQZlP2Srz95S8sajHuqqZUptIl6GrV\n+/kf+qDObkpF0jaQyQZbkIx0T138PmG29MkhEMc10/hmcA1OdpcLrDAuprOn\nX6TWNA+mFe4UXy1FSeFFEKSDdrBVf22rXI/9YOHe3sNERrRXJiiL2RzXXZzJ\nxyQroDE3YGAdAZEofLgBPGZNmkraYZaP0Lpfm95CKvm9sv3RL/Zqs0uQQYpI\naa8EAqDpkjk2W47IjCiZUrZg3PyEHGTuljTKBWvDkzEA7Hko+/0rl00G7FIn\ngnvl\r\n=LZYu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5yD8SI7oQTpTYUvxmTee49wFfyApWyECkFacMea3NAAiBHw2hkZ786J8HO3Lj2l+H40Yye/FMGB/FQPoK7Ds30Fw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.9830d665.0_1631569029436_0.5881793419732815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-button","version":"0.24.0-canary.20e2081c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.20e2081c.0","@material/mwc-ripple":"0.24.0-canary.20e2081c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mfvgYnVUhftm7YkSrkqvE3srXILnnuMNxQBbBQbmDzGSUryhJ/4/iilK3CW2XKIohohvuYgTeMlt3hCLBWhIZg==","shasum":"467c07405a5d39fadd23ab4ca44078eb6338ac5c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.20e2081c.0.tgz","fileCount":20,"unpackedSize":80017,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP998CRA9TVsSAnZWagAAG+cP/0O0d3x3vNkZ5pCEcM7A\n5RJ773zz5Rrzh5Eqth8yvLse0I0OFBUCLn0KeEnSjq/pSGTi22plkjpKhNGB\ndvVbobqz8hs4I4vCRiY6GS2gZrvxcnZ9xIl/bHy8EcqK9pqCVPQpmb80haid\nB5iYMQA+qA6TvHMkX8fsPFi8Hvpr8srigv1a8WKqmQNB6uSxyo9p7/l+aYqy\nC5c7QM0xfWzLC/5q/91eV6UNViR9fZv4ij6rZoZvliymwzRBT8zTx1roT/a0\nscGyVcd2eOPzRY1PJ9Jaio+odoJ2C741E4/vO/zy2MPFhIKBzZfB/rUKAEdP\nGqO+m7LO7BftSAWvF5H0aOtZ/WZm2rFoHs/Jyv65EADFp12arlt+WtaPJxYF\no2vor0kSnpKQEqQ0n664+dBge8UJXKvShBXrqwqjw5kXmHSTvMC/q/7fKfx4\nu3QnuUdbGZD35XhmS0cfQOOWq8I5fFKEzsqh5CJ+KIiOZQ60F7Ha4djWlI09\n6dqq4zB/3lKQ7o8knS2TqIWZOU/CqNCCslNOx3/74K7g0gbw2KJIoRekjpDU\nN+aQtofqVPYWuCyLkGZu8+6Epvv98w3P8Yu2BssBmM/XDraUWHikPSGcjY2m\nm3W4gHD8hoY2TGSmNnBzlPRui0xRhYCMKIlW0gCZIsTXq8P1rIoUmMAUTpJT\ncEaw\r\n=6kIo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/6R7zXezbvxDilqzLd2DqeJLgAXehA+5a8dGUCB8W7AIhAIjCTbmevdHin7PnnBf8LOzxx/GE5dfBBHF03vXHgwG3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.20e2081c.0_1631575932134_0.5495847788654817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-button","version":"0.24.0-canary.583613a9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.583613a9.0","@material/mwc-ripple":"0.24.0-canary.583613a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.864798678.0","@material/elevation":"=13.0.0-canary.864798678.0","@material/ripple":"=13.0.0-canary.864798678.0","@material/shape":"=13.0.0-canary.864798678.0","@material/theme":"=13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xcl6x4rZX2MS8O/2C3BTY+DDkhPD+V6cICs/TJSnaT8IMX+5jk1M6LN580gWEgMpogMzQLLol3C/SfN6LL1Dyw==","shasum":"c3cf4bc5573e590ef616c0fb81ed245eac06da69","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.583613a9.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNP2CRA9TVsSAnZWagAAOYQP/jCa1fTfMMiH1gziPhUE\ndRNNGzf35EgL5BPicMHK2a7pbj6N0c9ZlPBTKdF+VRUF8+rogqn+pVQzGtoi\nkiXGUa6As+TVTn0hj+0LHHE+Zl5VesYPDEeLi7FFzQ6TRwhlJt94YJSo8npr\niO5H7nwOgijKJ8l+Crgpikdo4Jvr9Q+zoQfnez9kBcj4LuWpSqiwgdR+0VVX\nwZJ2U6QfnkuNr1XHReZBK0oNVR11XUgrozZiYDD78rdLhlfMR6Qkze7iL6Ld\nS5GAIcpnHA1f91WEWid96DQm9S6UzUgaMjQdBGUz5rLBqVw/zx1kJscm0jKj\nB9qtdCK8SOC7+GVv+Kn2kIUJ306yJUfyMu9aynDmHOFpGwqAfxtmhXENS/Cf\nncMcBOSj8d04o6+xiDjqLjKSF0NZSuEGRLRdMV7T4VV5LQVahZ0l5VMs4rzq\nyHCxY7WfVdj8O/g7vGzCmV1O43hsvUnjZH9BzJghXgikGBm9D6tnjm+atktl\nV4baSemvuveT0737w5iNRrBWP4q/oiE4uy1yHjJNTMHQAmuL9eVRt9sNXADH\ne9EAs063afEYEtHttL/qe6EMkc5EUI9A1+hV3CT+YDmjce2lA303u0ArFjjk\nZc9mqSOBT2JT1q3WTGwZ4um3rKnDsFOSwB11fZjjDDxwQdZYe9gK24wBHdft\nuFf9\r\n=ZjD6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPg3ID9mP8yaK8663vs5UwY6XZZzhp7EY9BugqvWZL0AIgK6kW60bVj+se/y1WR33tDy5tMDLZjxgkG98OLPjOTGg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.583613a9.0_1631638518447_0.11678886348849393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-button","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.0e1bd56f.0","@material/mwc-ripple":"0.24.0-canary.0e1bd56f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.08398f880.0","@material/elevation":"=13.0.0-canary.08398f880.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZskPo5TB7QU/etg9KcckXlu8Vs89U7H7lEhNsDXjaDp6lNjZOxjPH3o5JOKKE0SsXKlLkobHBUpkMpDMcMAXIQ==","shasum":"91e6ccd9277a9a09dc7637eef2765a7e892e9b43","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.0e1bd56f.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNyjCRA9TVsSAnZWagAAUygQAJkV5znY9tbs6h273XHS\nCcT1ktNOsUiqxPqanvYIbjeUWx6mqg6CmLYItn6HhAHD1YSG6SGsGA5xLlbD\nOhZn2Dz0dGYSxPBs6vLWeJeuEUFG3mvIzk3xzBj5q57FkEBzno4mNaNO+Ji0\nL53OI3W421UnIdjUJdIMSUKQ5cZEjUUNhqsfMOYd2H/2Y8E5X3+GKsNvOvnE\nfn7iAVfBQ/cF2ghmF5b79Lwmqm1vnzqDc/dTJJKPPGja1UEXdb2Y+u1hs6H7\nZCnIjCiw2qNJzTEBGXo2MHVyc5YLXvBm70R3Qs5nMuS2Zn9ajQl8wlXSvbOp\nUl3CGogrJbBTCQYxgm6ponR13vQDiBWEFGebWEqzXiIBinJJYvz/joA81zuR\nhmHa/HqmCCrb87Th4udvPutbV8inwFkiOe0ot9egIOHIREzGn9lYTSUyG2UC\n4ZwYmZSJ4zreGxyQ5plI1DM82UFkHh8qN0XpfnhQzw1ntcLGaEfZw9PkT8UM\nHHL1HE35Yh56P78B3LWgLKUc+LBpBnXrMmdDzlb6tneiNnHUSuddk1Ds/CjW\nl38yXsFAz9p7G14oFOAU20hws+59DiEwYFr01u2Hw56viVuWi6AEz/B77sit\nn3BLZPe1yyoX0zmNc02v5iuKW2YZdrei2/HqsVG1g+GxXxFa1+GI44h4YMCp\nXoYN\r\n=aVhe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWzRm0CQdf8OqtUA6wPxkIVpMRMm3VjHep6xFa83Qo8AIhAMvB9qwl/K/AiVFJJPssUfc5AWIQf9KCFvnlYu6lMgC6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.0e1bd56f.0_1631640738957_0.6025279765865468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-button","version":"0.24.0-canary.7bb1818e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.7bb1818e.0","@material/mwc-ripple":"0.24.0-canary.7bb1818e.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.08398f880.0","@material/elevation":"=13.0.0-canary.08398f880.0","@material/ripple":"=13.0.0-canary.08398f880.0","@material/shape":"=13.0.0-canary.08398f880.0","@material/theme":"=13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-q4/qspyQ3MKgCxlM28s11gKw6gCggqNj5NnKUWLAfJ7SkQnVhLIVWpvPqix5gIiORhsT6YRTwkZ03KOreDptow==","shasum":"efa8d56a9d4eb37e8c1471c7199f558bed2d3e9d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.7bb1818e.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQT/qCRA9TVsSAnZWagAA44oP/2//1WOhlq5qEJG+FqcB\nBj/Nh4kfw6Yev0SB3oK+h+kv4QI1PCHmW3rcOtnSzDRGafAdNDgeQKJCgOL+\n7NyFIBLLXqxxlxjqZYBJYfIS+flH01lMLaAsED9YHRnXY7sZS9j1Um1ZrPyA\nTc8KaJ2EDefSn6ZU5fs1HMlXHq1NGykD3vRp43+Xs2ZdUd43X/o6Ivu541Fh\nSgO1L24FIQk+EVDkffsDutaHRLtkXXpq8mMtYrVVuVtf+WBrlXWeLpbHkySn\n0BwMdsH7ttiY0XAP8JpfpbSJNqMl+VYAOndicir6kerjVWIJODgjxC5Ychna\n43JBlsODLN7zBq2tUNfFYDhVpaZWBYrrhWlXdApnOZhyXh3iUiQ5ASiTgXHn\n1We/R4jL5OL8jx4EsA7p5WjFfZb9gbYHCxggIH8XLAuQ40ep8/CBnoDm/LSI\nMKSMd0/8Y61U0wRCE2FGyR0uM0MpjxBxMRcVKGwgcY684UJOLECSu3dNbpvg\nge/Zj8v0FkzEloAQFM1qh0utYF4W0NyiIEhE4f04TxCOejCrRM6LGqhluj6E\n7zmh8C4i1vT39e3ZmtX3k/fpyVaAbdGrwZ0D7xyl1aViwuCfZLDtYZEIA9H3\nbo6BF8NErfuTBkZ/A4e+Z8hVfA4uT673aBqeo5c+lxX/DhHIteDGJ954nZJl\n22cg\r\n=ro/0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKTYmcSMX7q1RqmM7YSHXj1dMyXrtjBU8EulijuzOlfwIhALldZqLH38a0uQIBAXR8MQZX6D/YZydpx/TqY6po3RgR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.7bb1818e.0_1631666154102_0.8888112778736132"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-button","version":"0.24.0-canary.b5e665a9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.b5e665a9.0","@material/mwc-ripple":"0.24.0-canary.b5e665a9.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qwEZWdi6f8jcT8V4sOxXcbO+V/V/pWMKCFPg2BDAxVzzI3PKYGLWmwi92xDKxeCDtwcaIVECXT8LghSnRK7llA==","shasum":"381dd583a60c2d59995619c25d21cb5d98e6313e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.b5e665a9.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQje3CRA9TVsSAnZWagAAX20P/iEgVbuMXAqK+w7oOupP\np2xD8NoipkxTrA/gurJdjKDQNXZ/mT7ZhL/pl5iS9zPyXrtyFJ66hbt/kdhu\ncXwEf5RkAnHMVwHgZNmsKvmeJUtGQtd+PVChCgfHAnwn1nENY/pObHdc86R0\ntkml5U7IIRJ3Os9b8SSjINNFVqjzm4a843yfCVNtzK87Cy9Z1RI6QEw4vnqs\net2b6E47aMSJlXNFdOZeQOUXUmyKL8hTVdLL35sgIs/K9I6Og0px2Xa5VrpJ\nv3bX5is0muKcqg/uuhCr6CdNNOlkJt7RJ4FZZoZJS/SPXwrRrMkPDCUuGkGQ\nBdHnpNGhDoqaNJFP28bofxFlo26AMk0V+bls2Z3GHzeGikVkhv3uKMO8DER4\nvGR5ipFt3cK01eMhqoqbrjIEDpDTRVJYJUQFe7hAGcjlsKSgmWTPfOCuzldg\nqJLmg8yyNE93KC2vnVhebdGN7So7RCJJqHLTJq57ZLypgijSDeP5Xb2qkjpp\nqzHvhHch2mklmuNsKORIlgYGJasvq0WLnru/JuY4YNGxdctu5I21fwYkPmLw\n/vEaQtm00zyfupoWrnDyH/skw55zBrmE01KJiK9WLy8yX6oyswZ6CD8S6cHj\nKkAeI0t6fjw064sLt7xdi7qS9W5plWprEKwr8bMYk7woYsU9kERvWYRqQ+l9\nGha7\r\n=lPkc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDzb4IlJ/WsEHoWTjLmcBEx4TP8QgdI+BH2kqUzDtQOQIhANvm3pZzx//UcRKSEzYVp76idPI7SgBhOR9J38nyDmrp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.b5e665a9.0_1631729591579_0.692922158398551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-button","version":"0.24.0-canary.ab1e177c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.ab1e177c.0","@material/mwc-ripple":"0.24.0-canary.ab1e177c.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sOnGEVMYEF3XcFHW0UmqZsgtKfLGz74AFiaqQwFojKgb3yxkGLA2LDOSd0p16GzV1iZFYNS0fjAzvVxa/0is/A==","shasum":"1d16a9467e27ff853f7ac10cf51dc7d5536dafe2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.ab1e177c.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj8iCRA9TVsSAnZWagAAGcUP/3AgmICCjXgvwmH4hz6c\n4+c+UTd2VCY22fo1FsKWlYhsdJVSSltE/QVyFbyq4lG9uWwqyqs4Bh5etbuZ\njlvrvjauWP3d9jtR3mn16RaTT0SKpCdw1VNNCZEHfzM4kg/XE8wtPWenluZW\n0n/50rhUAouiRdtkhzqqAOXeewBTNpbxA2BDEu+OX41Eb+c15RIg/DhOWvN5\ngVcFiJKHr8O+hxm2860/wH6yRAJ3jFrnxpUL3pVzVytNyUjNhTcB95h2vzQm\nS2iNK80G6ga615nKfq6B3HcRJT7Kl6ksbIUKnGEKvUR2GcdforM7de10pDLE\nw9LqtBq/zoQF76spdonpArMr0DmkWZnf4jap0N6R0oN4Jk0blC3LP4GHL3Wv\nH640lxuKkcOsPVuOPVQdo5Ep47oejT22Zc4dqnnTZ8wSGbLpLHshsWKkCmn9\n8f1wzaBEk7t+r81tMlFRr7lnW8s8kVw9OTiqNTCdlHHG7heKxtSlvF+p7nYe\nhk5IsBnpnBb3BBdbLV1cHeDT2For/WeNPQCl+hHu8hg3d2pOosbetaNXtr6N\nZIfTLgEjkpmh9PeB0oHaExaNvsdqBM+EDXNNva2Rrvgq25cbaDefgZOmJi7A\nNjQen4s0uwrmK+edTKvAAFfUcK22wbP8lENaYJ/j/pGfHr/IqGFG7L2bKhlA\nTdwq\r\n=1c0Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIELxhWx4xaB/XlHl7xtrM86Q0Y7PsofIL/fVTygU0XRsAiB2e6oY3fJBla2sNtz7dDezpZinpWGdDIO/g7ck0RXujg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.ab1e177c.0_1631731490072_0.32102725785186714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-button","version":"0.24.0-canary.8dff8894.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.8dff8894.0","@material/mwc-ripple":"0.24.0-canary.8dff8894.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DQrohA0Ulg1gxtLEcRaGYVhZDlP4mt6TXUjdPkJfEiwMZxZuuOFsFQjBdkzphjdA+8HgViFdFx3y0AQY2a98fA==","shasum":"499b27f3a0bbd53bd76433bac87dbab086a86b19","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.8dff8894.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkS1CRA9TVsSAnZWagAAIHcP/1OvLW1Lrto3jvwT8WEX\nBpE96nU+kxr/RvlL9+F/8W///Fj/kYL4PGUZnAqgjHR7fqPFOSUxstQVbuwE\n3WFyxI805w2FYLu0vx3kGGq+JWCCe6hoplK6kCH9km71vRnD8E7V2ekrXU4J\np4oKFaOPObWJGZFaLdbCdY3YO+/NOMmjqxInesoNKHLhsMigix9cJ4zkLtwa\n82BvNSR9syjCtmgRmJlz3OlEjxx7c0KP2XXxXnxuL1l2dWQrzRYxnQPGi1pf\nJ+l1c5FQ8xa0+rhg1s9PAepQPQJWdo2ZhboRUzLS15mWDbv71d4y/+vlgXiR\nQfpDFbf38MFVV2wiBNlQF1odFH39oUDngIbZ6kz3OmDyMaGc77F5pagbYhhK\nu1fkUSdUMO0egNnVaVqs8sCYewsQJg8yAXI3i+gZ4G9RpLWYs2BaQ09hbOPe\nbhwf7Wdd40IpMuH4ILdOoPh9NssFjkK/7xRgvTHSYv62fKSFiCRkSIXzCjHB\nXEVVJrSlJMB+G/POagf+PiscORfBTAsY+hm+K8+E14nDqIomywD4OIStW/Zv\nNghi++zys0BtguBPSH0QZVTCBKAuW8Reua7fJnWrvRl07vhqozpl00w5nMX6\nsiMvh9MLX3Fsmj3mUFmznhJ4vUj2JzMx2SduW5vjHV2rjgvJxLuzc6Jy/yJp\naSud\r\n=fVv9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy2rhtbYkoJuhfhcl0dOmK3nrTg1Lj11deUCVlHa2AHwIgDV0vQJXfoXxDHirat5NLGrvvvMmCNYz+naOfBdwv4i8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.8dff8894.0_1631732917039_0.8463065453838621"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-button","version":"0.24.0-canary.9cd7e927.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.9cd7e927.0","@material/mwc-ripple":"0.24.0-canary.9cd7e927.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vnpTaH5/WDRK3tWWvtYUDLr/k3S04Uj0s1OLVWWzu7JDrT9I9pK2kCWIh/AJzbKGb3BoHpR9t0tvSszj4nkilA==","shasum":"41be47801b610a955b86da56afb41f0fb2040fe3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.9cd7e927.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhOCRA9TVsSAnZWagAAxNEP/3tD9micPsCq59JUSuRB\nWJoBuZs2Pb6tlKIOZg+5xOKB5pSAiLOO4nCeRjxVGl/MFKY0qzDYkddiZ+B/\ne/OUfbH2+hFbphp91JFK1IZeJCFCNFvi3mjdrqq75j5FEdR9SNX6uzH7/RQV\nWTuX7ENJ7sDc4kjkA+qNWr38BY4NC/zeT2J/Z9r0zNsPq7zYd75i/lg+BPKi\nrvIowigBP5D9MKZp+WAfWXLL7k9HZqiQ01gCp+sSghpTpCuvXXqcQ8rXn+/w\ns6QdpS7xYC5gCt/7cT4LncDNdKdo52hNjAMHzGNxv7rjaGR8yK6gzn0Ocscl\nFVUbz7RAEIOJHgbsMiB/kCHYkS3QsVpwlma8MGaCdXhswTOjcqRBEfUYiMPk\nBuaNji1YAJZE++DXzQDP03iknAZw5O3QYRPhajRUYJ3K0dp7lwUbWOQEcnvq\nspfGpzjoNSceXMZRBFro9sU7B+lRKXcDlK7I2qu+Wo17sAzdEPP+hnh5xDGd\nF7dmh9Ao0oicxE5uzE5+C8XxpeZNgfxxepNGmWDWX+bidwvI1rzCf1PAoiLs\nocB/2WadMSXRq0TFSx6RPYa/3tzzaB3/npIqT7CX13UKBoMEQjNZjFGaWck7\np+/STfXVkZ9QRkOOpW/uTMSsMBk95E5I5xJW6VvOkZI0AkN+2q9rjAqqLJZL\nGFJ0\r\n=st8M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7Iw3Xzp/28TizD4EyqnZSwux2WSBK61cBMxzIM6MrqgIhAO5DfyhWaOUeUsl3rUY4a+fi9AtN9D6GjCfF7W2IIMLy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.9cd7e927.0_1631737933855_0.019458372975929894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-button","version":"0.24.0-canary.a7132082.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.a7132082.0","@material/mwc-ripple":"0.24.0-canary.a7132082.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.818f4ee93.0","@material/elevation":"=13.0.0-canary.818f4ee93.0","@material/ripple":"=13.0.0-canary.818f4ee93.0","@material/shape":"=13.0.0-canary.818f4ee93.0","@material/theme":"=13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-92oRiAl178jnGcAvsqn0fWDX/tUe7/VDr7hlNwn4r/JLeBGTj1kWkRxT8u1u0SLfBlExbUeIFthoEaVCh5i4Rg==","shasum":"a3d374740bd281b6c474d6248b12b4ff3120b76f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.a7132082.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmHCRA9TVsSAnZWagAAc64P/jQjXC2quDgKnjC8vEU2\ngoTUBUQlHsi85ZPM3le56t7tQys5Xb3hIonpmIK5Uw4sXVoMsX1YvjwYf8h5\nN2fo28bB5YyEnQ9op6xpClI2DT2BJ2O3PqAaxD4EaootEiayfP/ef77yrX7O\nXIJG7d5Mc4KW2P+OpRsxfpNx5c7t0fVbKkMNjHzLaZBLrND0IKAvpqBTp4YS\nHJ8q8G/L523H3hnmOm7uuow+xQCaQ4nryN9flrk5Y6qWqGmqwSO5UWXj0Iwb\nZn9YNaeZGboeeMRkBCdSpzn05UexMO3z21Y9wCCqT65W6ijd6ihOZd95dYPU\nloyocLeux9So5QhxcEkM+BTbhe3Ge3CVHElPpyakb0pyh+vV+1EhXpjfCKex\nBbP9vKIfOzwmPfNXOg7iMHl1UxhxhW0i2e4+9OqRTs52lNa1gyaYezT/k34t\n+og9QGo6kmJta6uDFXCfAxYMtGEcc3tPot8XgoqqmZdti/gPPvd1vsG6RxzF\nVCKgpYKWe2s1epCvbtCb0CdUtOJeA4KCr1XkmOUgH7l6/UGXE3QHEDy7hkQh\ngMcDRcFCkJeQmjmYFGe38IP5PQ2esYjhTQia2d1/lrlulCHMgCNwJvtx//2M\n1wp/2bpD/G+uhhq7PNMOkYT9U2mxgDO5yljJZAdstkBa6b7KRoPdH/z3gCS0\nJZiz\r\n=UYTX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv6zuqnlHOoTvHmnS8DXKL2uB6J97ywnhYlVitqQKzaQIhAMk215+WcQ8wRpCburweUjhRUZC/Rw8nL+OljsgxjNJs"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.a7132082.0_1631742343377_0.03640265510099039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-button","version":"0.24.0-canary.cd9110cd.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.cd9110cd.0","@material/mwc-ripple":"0.24.0-canary.cd9110cd.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.d4e16a6c4.0","@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/XjOL6qQL5BWGIaygrqHRuQhqKitchToIBDTOC4YxrWxBfPXdwYpBSGJi1cp4kcSCL2a1gk9pEDKFzaoBsFmxw==","shasum":"ddb9f8de4150f4ca6e9a55525793054a61255a45","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.cd9110cd.0.tgz","fileCount":20,"unpackedSize":80032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LBCRA9TVsSAnZWagAA+eEP/RDZJvL/QE51sxZj3Dod\nXwe//zrD8+dS10D8yP+WlWl/N2IQG0mfPhlQ8e4mzA0h4G63ISEX+pe8gMu4\nTTF1yuv7d3NKkC58i6kpxslDmYXEQcbexfH8xF7RsIuwSPi22WXqxgNrOIw6\nXZJUwwFbM39LlqG+lO4HQkzYbxRFnII7RbpsrwNGRmItVIOg5ZowkcTeDonY\n954tJTfkW425WQd8ZBKejwPOlA5kwcZHFuZ5lmzW3yfs43EJKrl+n8kB1omW\nrA4oMPdFlBQB8WlCM4rzd5HJ0EgwRLYKYtGItjRt9RZ5Qu7G7W8CziZM4Mni\ncYg3ur8wQF5Q8sJAlWLs3KkTrYFPqJ6R0kDlhWBFrTz5yDJqKlbM+nwt5BR3\nmLrzanpacYeujM5Hxe3JgL7e6GDFSTFgavBf8vcQ+0faHbobK4FHHPMYiRpK\nRfWe/Bj1M+7HzdAbeLl8ECfAyZjraqh8IO71yABlfF5/MPWDRun7NJVSGQ4q\nnxio/fEOEYQ2aD6bAtOSTqAm+JzduZaVwyxHhybjBcMZMGmFyI4jQ20cOkqV\ndF6qiQGuyYLA6FhCiv8qoxl8E1MESvnkswOvGR7XFRbvroELRu0LM+GpuYyr\nqI9tvoBOZUesg12FJNzkTObFgAqlG2RUQWd/N1KNsBrl2g6kLsFHJkdfkW9k\nu7I6\r\n=qotz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHeUgLjQdG4T7ppR4ZkzPPjH6TQQAyO7Cs8Sje4eTXzmAiEA6nRI6hD4eDhhU6p5SHzifMdO4Lrqy7dD88yhcsMYCU8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.cd9110cd.0_1631814337460_0.0928449028605054"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-button","version":"0.24.0-canary.1e5a9883.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.1e5a9883.0","@material/mwc-ripple":"0.24.0-canary.1e5a9883.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.d4e16a6c4.0","@material/elevation":"=13.0.0-canary.d4e16a6c4.0","@material/ripple":"=13.0.0-canary.d4e16a6c4.0","@material/shape":"=13.0.0-canary.d4e16a6c4.0","@material/theme":"=13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-yXtdcozbaN0rP1FKy48Na7SkBvxQEXtgjxSKTlX1I+tjC05hO9cil09GjyBrtXhY2QxgU6JBUxGdk100XoFpow==","shasum":"7a3dcaf82eb398b802a0e6d214ae78906902d7d4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.1e5a9883.0.tgz","fileCount":20,"unpackedSize":80040,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIELoxJdiK3q/ZRKm6tGcBBKaghu4QeoOWZXVbGSD5ySCAiEA8qqmzPnCaSITuz00658T4e97cHXkAqPcaEs4g5kXtpA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.1e5a9883.0_1631911147033_0.6707269582732116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-button","version":"0.24.0-canary.32c830ee.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.32c830ee.0","@material/mwc-ripple":"0.24.0-canary.32c830ee.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-+wNoVErwtsEf1/O6SzAilnlv4PF/KDZ9PgoVrpvjH/uStlBc046mdU24o8tFuN5fnXBxQ+Pv5w8MdikBXFaqew==","shasum":"996dffb9bc87e53a64930aa95bdda7b63dc6dda4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.32c830ee.0.tgz","fileCount":20,"unpackedSize":80040,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDu1FaOJYXg3/3rYIN7BD0tOSbosMgTbVPcCDurHgjWKgIgCPoCy4719EbTW0pvKqQgUUNghGraA2jWKYmzmlWUhCo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.32c830ee.0_1631920125873_0.10112813372500873"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-button","version":"0.24.0-canary.1de87bb7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.1de87bb7.0","@material/mwc-ripple":"0.24.0-canary.1de87bb7.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-n5ojDsWpp8DhAUJvXekdvnL+mrLN8ie0A2CVLJDttIZyDkh1hYAM0U9hwaeDfkoN0QCVwhOKxjaB3T+L+ZkKXg==","shasum":"b1ca39514f7c4e45138da270877109590f0f11d6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.1de87bb7.0.tgz","fileCount":20,"unpackedSize":80040,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKjDyE7mvqzC5viFm6z8AznGrjRw+etGf7ATte/d8qgAIhAPqxIJx19kg8K8r2xAFyPASD7PQhAy9NsT2E1NPcwrwa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.1de87bb7.0_1631991128673_0.8992863609605577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-button","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.f2ea80c4.0","@material/mwc-ripple":"0.24.0-canary.f2ea80c4.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-D4sZdKoebEfy/Gro4De9hllmghRE66GYEz9/bdWLobXjGhxrKz4MQ91pfB+cs+BdlR7tofSdbXSGU37BvnIDcA==","shasum":"9313879ef8499a3513e273da47eb979dc3aa5f1c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.f2ea80c4.0.tgz","fileCount":20,"unpackedSize":79992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3M02b89bhfIiAWP0ClQeY9XziWTudVC/KsqTlyGwhKQIhAMm/F2K7QnBl4Mc/G1AIExPuerb9oR8mRtlUkrX51PZ8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.f2ea80c4.0_1632160493894_0.15342747402740686"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-button","version":"0.24.0-canary.569d739f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.569d739f.0","@material/mwc-ripple":"0.24.0-canary.569d739f.0","lit-element":"3.0.0-rc.4","lit-html":"2.0.0-rc.5","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-DCtJDXgv6kx/qqypROzAnatLDV8lAHMraVKFiczWDQio8M2NbJK3e+dKcFgFtu13ik8CyDx1rY3mAG/2qa/2Sg==","shasum":"f087c91cd3c7ca82a0a4b0b8d9306e148d29780d","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.569d739f.0.tgz","fileCount":20,"unpackedSize":79992,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJCLEvQftrLs492b86xYx3Zm0t+Jri0cNVt6GTO894PgIgOMhbdWJ6u4rA2Y9KYG+vXJoWpImbeVwXfS0o/YMySpM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.569d739f.0_1632173028372_0.21886748923361798"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-button","version":"0.24.0-canary.5a434a50.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.24.0-canary.5a434a50.0","@material/mwc-ripple":"0.24.0-canary.5a434a50.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-lLNKWSOUQNE4wIo1tW7uKy84S9Rntwc7g1ilr5nrzV1w7UecfuoHuLtvSZmP8D+IP8Fj+DFnMeQljJjoPjFTgQ==","shasum":"97ed6de6e1c2e07ff8dfda5335ed1e05937a7fa8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.24.0-canary.5a434a50.0.tgz","fileCount":20,"unpackedSize":79984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEq9faejhRbmSYOoMsmWlmqhfAdPW6mW5vM+YDCl2NsAAiEAtpi/vJNbbcQZMr6f2cnWfxDnqVCps5PTYeKyZok93s0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.24.0-canary.5a434a50.0_1632189644796_0.3267996855441955"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.0":{"name":"@material/mwc-button","version":"0.25.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.25.0","@material/mwc-ripple":"^0.25.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"6be1a13e29a0f18491948418d7076fdc1c7031a6","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.25.0","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-bJg77z32uOFuvf8oLv1jJ7nX8TkGSlG4j35EHV4P4ewOqg5XOV6/wK7nSC/H2dNxOTuXa0IUJkEFQIFX3d/kzg==","shasum":"aa74b8b2bd60ec84f0f5b880813eba2b8e950058","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.25.0.tgz","fileCount":26,"unpackedSize":106371,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPfqnQankaa81UB5ASsGhDk4bA9b7cYFYVLrEf12XfYgIhAP7B7mAeadVXI4aG6MSCqsNU5YWD9hkUdY+nXXpMw2dg"}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.25.0_1632192783889_0.37576143713204835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-button","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.b1c1ab52.0","@material/mwc-ripple":"0.26.0-canary.b1c1ab52.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MpNswQQA7halEIJi+RoB1XwcixD1JMIAg2YEDzG+Xs9+/4Uxi8id06lzbARZqvvU2Simc3/ZT4S1Vp9tP0DjPA==","shasum":"2fc6bdbbc85d14d35233886623ccb973ee6757e5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.b1c1ab52.0.tgz","fileCount":20,"unpackedSize":79984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFqNOfeOuAwIPZonsLcg0pfrgE2d2UItpWqeDOomvwTnAiEA06t47MqfZFagnxelnL7rq96TIzlp8uC2F/bsGIWbw4Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.b1c1ab52.0_1632193930122_0.9997784356845658"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-button","version":"0.25.1","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.25.1","@material/mwc-ripple":"^0.25.1","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-T/+9qWofF3KDNl4qkEduQWUR+euEAWYHnPiEQABG7GrkyRYQ+sUq3lr3PzD8Xg55vXQMCJwQbjRQJeVrPdQJeQ==","shasum":"21486815bb4eb3f0e77f45a11002ab49098d8e3e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.25.1.tgz","fileCount":26,"unpackedSize":106371,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEregMr6isd5szaftwGeFy++G8l/Z70J1tFhuNroEwkAIgNMrbSqlJiBT16fZmuFDcOU7Uyu2xTLmG3ZH3OdiBLL0="}]},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.25.1_1632193962434_0.8585292683120687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-button","version":"0.26.0-canary.ae060177.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.ae060177.0","@material/mwc-ripple":"0.26.0-canary.ae060177.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-6YJQDkQVTolt20CG0RkkP7JEEzYu+eNm0u9easCc1TzDRT7Bemi1TU38Xllnuc0V51xzlwNzPiJ5Dj9fX83gig==","shasum":"ffae78da35481053c3341f3ff9b0d4d7bd7531ac","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.ae060177.0.tgz","fileCount":20,"unpackedSize":79984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWVh9cJKWSyFKk9odVa2kf3xPkHgYPBLmFKH6x2B4qpwIgDsCNKBa8CVjXEiliGgFTj2YAAAXg0Alx/siuYG1ml1c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.ae060177.0_1632235086938_0.6996868354240109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-button","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.b6fe2a12.0","@material/mwc-ripple":"0.26.0-canary.b6fe2a12.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-19gyr/vT7BVByf5w1YZVOBMr+rgsHQlqw/apOj0pIAsxumhZRgpMWlsUip95aAvWwpEFMpvv4HVgCgBLYiQLww==","shasum":"92f912583ac474236d1a718302fbf4dfe06a625a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.b6fe2a12.0.tgz","fileCount":20,"unpackedSize":79984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF50tdB6gFfl3ko17B7ucDuo3NV46ixhvltfdr7n1QgPAiEAw2Q9X2CqNlodqJiOdobWkKgh9qHeXtkNST2BbNfTMeE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.b6fe2a12.0_1632341775829_0.08605487002129819"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-button","version":"0.26.0-canary.07e91417.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.07e91417.0","@material/mwc-ripple":"0.26.0-canary.07e91417.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-iLeC3l4MKh9wvPWVr/4TmPVOTjcRnXxssgZ1/vlJqwJvXpqcYbe/D4n+GNRpiW3/6m/mAgXxVopkJ2SENaNKKw==","shasum":"182c68a268572ccba0b9b02a042ebffa008ae3eb","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.07e91417.0.tgz","fileCount":20,"unpackedSize":79984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPTJwfYkJg4AuVw0Rf1UC0MXqBmyFDBL2Vf7pufAzCygIhAP3BNkTFZ9bI/h50PwNFAVa5EgPtFLTUhO09855GbZ/e"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.07e91417.0_1632344745981_0.8481221079879657"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-button","version":"0.26.0-canary.e2203ffa.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.e2203ffa.0","@material/mwc-ripple":"0.26.0-canary.e2203ffa.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.65125b3a6.0","@material/elevation":"=13.0.0-canary.65125b3a6.0","@material/ripple":"=13.0.0-canary.65125b3a6.0","@material/shape":"=13.0.0-canary.65125b3a6.0","@material/theme":"=13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-j14ej1/Ceo4BXaRXLy6g3Vgj6Wsug3ga8ZHncYG9iovFYrjU5rzHQUiajJgL0t+nI5BkOVyP7i7phm1GvZbvgg==","shasum":"45db4e589149122957a9b29027c14440a42fd762","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.e2203ffa.0.tgz","fileCount":20,"unpackedSize":79984,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaaso6JufO+lD7A/uLezhzecdLEZXlb981QI9ZU7qVxgIhAMdkFVukcBKPnn7tzzBtkni3XzEwot2GsUuMHgQC00qZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.e2203ffa.0_1632421656818_0.20652663157227402"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-button","version":"0.26.0-canary.4abe237e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.4abe237e.0","@material/mwc-ripple":"0.26.0-canary.4abe237e.0","lit-element":"^3.0.0","lit-html":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-QdFJkL1V2V7hXNckm0hOPSaqDqJB9fJ57UbXySh9QHVeAZkd4g6nx5t+/N3jxP8fWuFF85yf80p9S1G1N4IteA==","shasum":"31afb75e86783ee2267f527502cd4d0a43089ee5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.4abe237e.0.tgz","fileCount":20,"unpackedSize":79982,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7ypJuLq8Rsk52j6vtTNbNZrbULP3ZJ2fg+PSWJTZaYQIgbYVphraPTaGLHLIBbN8l8763F2W/pov+U2+KnqCOxv8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.4abe237e.0_1632504668013_0.3273492133884639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-button","version":"0.26.0-canary.6278ee5d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.6278ee5d.0","@material/mwc-ripple":"0.26.0-canary.6278ee5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CNcwpDkv1uX9ia3SKiDpLcfPbLx6iT7hW4BzjjXmF0Abo1Q10xK9U6/jfXftlnphi+nO5af/CjH4mIwYHLIQsA==","shasum":"50ff5ec1526b8e30b506d75cd05ad0dffe5d520c","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.6278ee5d.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC37BoOrBQVAf3tG8PyZxpBR1WWtYtQLUIYYeoj1ltKEQIhAPr8mO7RFK982VKc8wOgdHWTifWh9Jheifflua3F0GDT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.6278ee5d.0_1632767481219_0.2611385540925306"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-button","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.3a5d5f34.0","@material/mwc-ripple":"0.26.0-canary.3a5d5f34.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=13.0.0-canary.c79aa0cdd.0","@material/elevation":"=13.0.0-canary.c79aa0cdd.0","@material/ripple":"=13.0.0-canary.c79aa0cdd.0","@material/shape":"=13.0.0-canary.c79aa0cdd.0","@material/theme":"=13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-vHue2e43g8+aghwrJvL5H088YtzRlxrARcJ7mvBrKLEsXwI6h8/XhimdnR2Li4MagnrutKX4u0L5E4zf25aYIg==","shasum":"cac06453e0b1a96f6270a0bc91c8199520b879e1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.3a5d5f34.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFMXEOgSYJSZEWCjUDRFXc/MRglGMzINbqTofvwDMzr3AiEA1Nc4ugBIdmQsrfWZlOAv7GyO4QR4yGwdhf58rMmY6ec="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.3a5d5f34.0_1632782491132_0.7426863258246985"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-button","version":"0.26.0-canary.143ed3c8.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.143ed3c8.0","@material/mwc-ripple":"0.26.0-canary.143ed3c8.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.86b50ef74.0","@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-C4X2WNTMiPVN+JDAPjqpqxJ1dYgNmP7DmFB/un52x3uZBEEnBh1DSI7QUwusHwBMhsB+BY2RXX3i5EVahfS1jA==","shasum":"bcc626303bfb79b51d21ba0a3754aee7185cb387","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.143ed3c8.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC80X9KI3FudULA/IQCvrIsJfZ684gcX8T9tsGFzeSjCQIgZgaNjBWA6SMRXff8W057tm6VBT7gBusj6/0EfrPQ89c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.143ed3c8.0_1632880249935_0.11279945136323688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-button","version":"0.26.0-canary.e5923d68.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.e5923d68.0","@material/mwc-ripple":"0.26.0-canary.e5923d68.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.86b50ef74.0","@material/elevation":"=14.0.0-canary.86b50ef74.0","@material/ripple":"=14.0.0-canary.86b50ef74.0","@material/shape":"=14.0.0-canary.86b50ef74.0","@material/theme":"=14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FnQao3bYMBCCCQpq7D4bqZv46ZKe58n63b0Cjv8V/42RPoFlnEg842Oyh4L66bo9x4vgsIZIv9z2HQvq5zw0ag==","shasum":"877621fdb284bc406bc350d0acfd3bf5d2ad1453","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.e5923d68.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/JQr92QBrsXcMmoA04Jb+tdCyPX+cOjmWDD/oksP/QAIgYUEI6Ohg09YSbC8tjRjVuw1S4tiN2eWQrgt26p6/4qw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.e5923d68.0_1632960348733_0.9839050111919174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-button","version":"0.26.0-canary.d8ed5109.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.d8ed5109.0","@material/mwc-ripple":"0.26.0-canary.d8ed5109.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Ufqs6znW4uMAbgyriPtH/TJitPPmx7u4298Ew9VYXMcXylqghjekJD3kt9Ny+HoWMhMnlsi/TsO5AwjL49LP3A==","shasum":"8936130a5333e7cdf07f2b20715f8a1ee089ba6e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.d8ed5109.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEA3yElYKEehTmKrKNge+PId+Zl9ZHGcZ2Qls4JPpqbHAiAzKXR3fSjNgJ6ma/V/D6K524TOZH68RcIglR2RuU4OQw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.d8ed5109.0_1633044832335_0.19169512892037144"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-button","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.0efb9c2c.0","@material/mwc-ripple":"0.26.0-canary.0efb9c2c.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-fbHKUrC64RklGkOtuD6NcDsvU5yY/6sHXZHJSC2HttWu99ohnz/H70Jnx79s/5RBYlea0TfR9am5q9WKQviiJQ==","shasum":"6c7726d73b882cc398f2a3bccea7e17e6b7a100f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.0efb9c2c.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID2GoTnmlWTtKEAZFGlpJEklxRXirh87bGzvyaohdB3jAiAoHrN1SQb99r8dTbbiRub3AJvuj/4MhePEOT3fgMrfSA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.0efb9c2c.0_1633140496642_0.7322925364594519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-button","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.1c9adcb3.0","@material/mwc-ripple":"0.26.0-canary.1c9adcb3.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.586e740dd.0","@material/elevation":"=14.0.0-canary.586e740dd.0","@material/ripple":"=14.0.0-canary.586e740dd.0","@material/shape":"=14.0.0-canary.586e740dd.0","@material/theme":"=14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-PgAjC1MMjMffT+qyK1g+a8OompamEmVpsgjNNh6n4ndVHKxUxrByvpRhOxVleeT7RGxdLTGYC41qUOcNzyz+9A==","shasum":"e78283bb3913892ba459f6adb2f55e62654eea73","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.1c9adcb3.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzSbTuOYNx9VfJFDxYURKBHei32nU5dFMjN1I7yogWLAiEAsVjW0PX7x+eyjug1CLTUL5fxUHyFpgkd0htHxL8zZ+M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.1c9adcb3.0_1633368813027_0.6100543407553485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-button","version":"0.26.0-canary.dfc00d60.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.dfc00d60.0","@material/mwc-ripple":"0.26.0-canary.dfc00d60.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-aoGiLIE5IpvDr6QY42BkP0lh6LFE+edsW1urNikeIF8gHihi+meU0wnIfNy1pVEVy5Df/O1GktzQfvdc4ilojQ==","shasum":"8730fdf1df6f1ecaf3c6b10bb4a4dc91bb0dbdd1","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.dfc00d60.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6lhIqfRPzNOVOsNuYr47SwJp37bvGHb3tYG3EY795ewIhAOWqcv4RwXcfdbuXLhTIkPRACOEGdz6a/N98s2mGoXcK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.dfc00d60.0_1633741034777_0.4455641125192442"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-button","version":"0.26.0-canary.c3aa844c.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.c3aa844c.0","@material/mwc-ripple":"0.26.0-canary.c3aa844c.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-izsr1MJ+b7vPaJb1StwMIGiMHpYKnzfb1DyKX2blD6J2/6+FydmijLCgvA1ysF+5NdB/PtSoWyBXtfrmjJKXlw==","shasum":"456529986109c9c5132cda53cf1fe3cd0d893438","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.c3aa844c.0.tgz","fileCount":20,"unpackedSize":80017,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATeXbnl+wPM1hWlZbRv2VfyNz26hTPOHkwUIKE/zXoKAiEAngugNjeXOkVGNj9Jk5tQQMS8TIIDPd14sEsWboYcL+Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.c3aa844c.0_1633994060947_0.7862350691891582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-button","version":"0.25.2","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.25.2","@material/mwc-ripple":"^0.25.2","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-1gGvbK9N9LQQhuBJ9JZ2TEzlW2og+okwFlVOcFXBIOFb34LZ69djp70BqZ7oTrz6CLCDXR6m7EKGsQfSNPqAtg==","shasum":"dc91c53ee3f63b59a275f809d8e8d6d513ef369a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.25.2.tgz","fileCount":20,"unpackedSize":79965,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5/lKT/fQN6wm1FNSei9Q0aYNO8VgLfba+CW0GvSns8AiAmNHPYGwBib+ATmp+T3Et2KsEVa5N/t2fCq3rIY2K89A=="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.25.2_1633994313262_0.08184275282986841"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-button","version":"0.26.0-canary.406d6fe1.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.406d6fe1.0","@material/mwc-ripple":"0.26.0-canary.406d6fe1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-RMvQL+tkX1AwjBTAksPUv2g6nFvODevqt9C0DSDpxCYjJahgtO7uYHWQtv69Zcx4DV62l8ipAwKjSmIuuFXGpw==","shasum":"a992eb2c8aa610e242b25c2715132711f5b84277","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.406d6fe1.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+tK8I3WuOZKlphy0viVKgo2YcnzCdiWaIz0vIUfjoNwIgS+Qnu6TU3ZTlwgL7HS7JcTQdNcJuLe//vj+Riuj5H9o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.406d6fe1.0_1634158768251_0.09810002524057793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-button","version":"0.26.0-canary.ca0a674f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.ca0a674f.0","@material/mwc-ripple":"0.26.0-canary.ca0a674f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.353ca7e9f.0","@material/elevation":"=14.0.0-canary.353ca7e9f.0","@material/ripple":"=14.0.0-canary.353ca7e9f.0","@material/shape":"=14.0.0-canary.353ca7e9f.0","@material/theme":"=14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-ryFhA3F5Wz9BefVVRtLWWNU6gplabp7UdZahNkQrCXjHHFiCZa90r4wQa1+n8leIdkvXRgPDAkrBNeNOjxmUPw==","shasum":"824cb3c59f9267357762a5de69281ec03b099ad5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.ca0a674f.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAI3o2EcVgVjdCHVQJsZFfVSIuzmfyPUZnzRDVKnyUaAiAlnqI9a3EBi4y9hdS+TQgK11gXAdDHZ3kGiQ5sGQqM1Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.ca0a674f.0_1634593019308_0.7756739108921178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-button","version":"0.26.0-canary.eefcf660.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.eefcf660.0","@material/mwc-ripple":"0.26.0-canary.eefcf660.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-MLCrulh8VALpdFm47v5fyl2F69DYwy6KGhnm4hqbHIJZwjKB+vZs6yIXCcNqcfidQfrrQQe4+zWj0njgvur/3A==","shasum":"e21951a3be3b448a3fc2e6de5e1f0a17f9c79228","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.eefcf660.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAKEWrG428LOvG8dg1y0G2x1b/+P8sN3rDTLUewoWfgAiEAu1HAZgMz0/BsZCLMl0T44TTS/IEln4b3BYghbUuxL+c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.eefcf660.0_1634765016852_0.4019578599202427"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-button","version":"0.26.0-canary.d21acc8f.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.d21acc8f.0","@material/mwc-ripple":"0.26.0-canary.d21acc8f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-PpXi24pxO5bQA76j9fZnQJYjaLW8YxsXMM5dsDnkXgeFIYEifHOteMAewkmOo9YGqMDUdcYv5iCqcBuZLhj6bw==","shasum":"05c279c15cf21c0aeb48b2751fb3d2f8448597ab","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.d21acc8f.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDd2n18djMQT3druFdG61wjdXa5VQ60BZwlF0DO7G9b+AiBm6wUUh8BC8/7Rh6EC5waHpLDT1Ic8IeWDZMfroZ4sYA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.d21acc8f.0_1634769149533_0.7295367979458471"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-button","version":"0.25.3","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.25.3","@material/mwc-ripple":"^0.25.3","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.261f2db59.0","@material/elevation":"=14.0.0-canary.261f2db59.0","@material/ripple":"=14.0.0-canary.261f2db59.0","@material/shape":"=14.0.0-canary.261f2db59.0","@material/theme":"=14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-usHEKchj9hqetY7n0yebTz1Pk9Z+9W/sNZheFoSaiWQCv9XhtCdKkHH0MXTv8SpwxWuEKUf/XjtyvikGIcIn7w==","shasum":"ddbe6d3bc1e92b73baddaf6b586da9eab5cd03c6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.25.3.tgz","fileCount":20,"unpackedSize":79909,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICeCWXuv/Xa1iL3ZEb0Y8FsYdLP0PgNylKwqZhyxKpKSAiEA9Yzw9+vs05RmWYNx/vzjk1jmgknnWdVyGfOR5Nr0YMI="}]},"_npmUser":{"name":"taylorv","email":"brian.t.vann@gmail.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.25.3_1634838944536_0.5696794542763794"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-button","version":"0.26.0-canary.60449b7b.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.60449b7b.0","@material/mwc-ripple":"0.26.0-canary.60449b7b.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.9803d2dc1.0","@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-1u8/N2NKUWIW/ooNZMeHm9vXjA3B40kOTOywV9hlBdcXy2wU9AOiOVQD5HmvfNNtzXHm89CTMlPHboyyVGc1EA==","shasum":"c8d9778f411a1286e1501c5b62dc3f5483a4c80f","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.60449b7b.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEfKUjovhkcVMUnUiTDZ13JyVZY3DxPeW5VjN8sRxQyhAiEAq+9KEqQVZvL2BjPAkvhgGEqgzrYcqVlmjHfw1Xoy+zI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.60449b7b.0_1634840246453_0.03106420132692289"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-button","version":"0.26.0-canary.0d8084ed.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.0d8084ed.0","@material/mwc-ripple":"0.26.0-canary.0d8084ed.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.9803d2dc1.0","@material/elevation":"=14.0.0-canary.9803d2dc1.0","@material/ripple":"=14.0.0-canary.9803d2dc1.0","@material/shape":"=14.0.0-canary.9803d2dc1.0","@material/theme":"=14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-OtI0mwb3bvSsKexmq3f+KJkyL+tEGZL13Ye2tQ+AUjlPgWPHY400bV1XzhXTvO4z7YSa8kFLWOIt0uKL8XqGoA==","shasum":"61b2e4c1541cb524f5c52e8e767f3a52bd7eb7b4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.0d8084ed.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9qShR9CZxqcSBXp8kxDFHhX+POu1I0W9HwbXL7AE+HAIhAKTwWw3aUI3duPIhM7FBWSvYjq/CieJ3UxzE+ovXFh5K"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.0d8084ed.0_1635443094229_0.9935027228212163"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-button","version":"0.26.0-canary.232327ee.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.232327ee.0","@material/mwc-ripple":"0.26.0-canary.232327ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-be4eWsDE3Ps70iEmLTN2VdrMaMj+5fD7qCSr+9I55YBkZPMZ0EbVy74nbtt4FIMPJYQSIyhQcWrpq/uJIJmwQA==","shasum":"6dfb1675650784b1fb938003204f39e503e75f85","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.232327ee.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+eEd1DrBR2Ru6AZ0tMJhGsmmhYAwdsiLVlBjoeM0bWAIhAOBufLnCh585VBmHw6nY0r1W4Dfy4gky2Atd5Ty3tlf3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.232327ee.0_1635797745933_0.5826700478946296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-button","version":"0.26.0-canary.0a492ae8.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.0a492ae8.0","@material/mwc-ripple":"0.26.0-canary.0a492ae8.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-DDwYWxL+zVHLZzMNxAXnKBdpeaqkicULxLzjE6+sx5HISR4Oa7IzDd9SvIofDUEg85lmBZkCSsv0Wh4OUEpjLA==","shasum":"bde983a0951ec94d2e5603d044a37861e302fbd6","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.0a492ae8.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEiFeAT1DyRWxo8GswtFCFLzcbBNvS5yy90pLGsFN7AQIhALXbQiS1O6ZJwuoEi9DmbgcdW8UYGOMUaaBJuCXtbNxd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.0a492ae8.0_1635847224621_0.4020402540076249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-button","version":"0.26.0-canary.0aa18745.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.0aa18745.0","@material/mwc-ripple":"0.26.0-canary.0aa18745.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-wLshzpD5nOAzStprE4HWiP1tmzmUyfb3me8w6LorNrIhEBwygyzLFSvW10KX4FScDNssE3LtMXX3KHZ+jxzMiQ==","shasum":"d9f18bf874657885706e2e175b0f3536ba134aa5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.0aa18745.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCJpsRYDqidbr9L+EKosRrFCrbng32aYvjFnHOTHWHYBQIhAORUOGA4jc+OqUsxmE7N+mG0/TmWO90HDUyle721PaVI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.0aa18745.0_1635876471168_0.5529945721109168"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-button","version":"0.26.0-canary.f3e28323.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.f3e28323.0","@material/mwc-ripple":"0.26.0-canary.f3e28323.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-FdYEAYViTNI+2kVpxhXl5uE99e1W2Jfr0KvcZRbKOBr8frsUxFIRZFH69i4kRKz00Btx/9FEW5MNC8kgpum0jg==","shasum":"308a027698338c582d41b83859b1e48fce49cc36","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.f3e28323.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEp5N+LBIriPVi+tPFhtXth1J2LqCBW0oRORDO5SAxNaAiBTEZk4qUdEL22dcA7uqtfZYhgopp9TNheh0oVUiPvj5w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.f3e28323.0_1635879573381_0.6565043010541225"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-button","version":"0.26.0-canary.27e05c5d.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.27e05c5d.0","@material/mwc-ripple":"0.26.0-canary.27e05c5d.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-NiBYCcKVE6WJauTt5kyu20yDKIu6Fw3ALdNIoOmoxoGD7gphObL62uX/3RfF88g7Ce2oL5io0h2mH7cTMnLR2Q==","shasum":"d805487a94e1b8623bc3369f68527c783de3acc8","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.27e05c5d.0.tgz","fileCount":20,"unpackedSize":79961,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKBa51MiymUh9zYhP3MraYNtIjvkvZ3iRmG21vdAUNaAIgTkkCkS55h0D83SBd2pTyai1q88WOrlJRuoCYn+aHCMM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.27e05c5d.0_1635965099080_0.24388013951176624"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-button","version":"0.26.0-canary.b9e44af7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.b9e44af7.0","@material/mwc-ripple":"0.26.0-canary.b9e44af7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-zh1uTpDWtNZbAT6puODQq4X7IPJGl5EbVS/frpUNhdJW3UrIBQUH9vJwqZExq+zkdY34voscYb3nrZM1egCMOw==","shasum":"70646241df5807b03a594babef98f43d71b80c21","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.b9e44af7.0.tgz","fileCount":20,"unpackedSize":79970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsCtQw6pt9acuwGfLOqD4bdFgCXKL9scxfKnqm+AL1+AIhANyZ/yzbKEBN0Fpt4tuhbD82YMPS9A0HF+/6K/XgmMlW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.b9e44af7.0_1635966242670_0.2941027113520043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-button","version":"0.26.0-canary.448f6cb9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.448f6cb9.0","@material/mwc-ripple":"0.26.0-canary.448f6cb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-mCIxwnDMCqIKmAb2s0R9MNSIL/AC9MGob6Q5hWZDwfBgDhocy/zXsqqLKhjJm/p4kWVP+ycQ4hlQ4edgaAVyYQ==","shasum":"6041c7dc8ff30efef64f0a99b99ead6abe07f283","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.448f6cb9.0.tgz","fileCount":20,"unpackedSize":79970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHJntLTu8ibtFJzdACWBa9iJYVoI3eUpLARhbtkAC83oAiBgXFwB81xUZz2zHOryPRdeHfm0gtshSfkSfiV5WbMJ7Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.448f6cb9.0_1636049274117_0.5162791190463973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-button","version":"0.26.0-canary.8067ce28.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.8067ce28.0","@material/mwc-ripple":"0.26.0-canary.8067ce28.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.a986df922.0","@material/elevation":"=14.0.0-canary.a986df922.0","@material/ripple":"=14.0.0-canary.a986df922.0","@material/shape":"=14.0.0-canary.a986df922.0","@material/theme":"=14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-+iwzwFIYsC5V2FfEp4bFtzVwV+S67zxocPCXvziQ/nIyD91FwuD6UmE+lwOutwWu56hMhhGHG1PlKKDCgS3Gnw==","shasum":"f75f513625d0a81e5a788aacb8064643f87ff479","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.8067ce28.0.tgz","fileCount":20,"unpackedSize":79970,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUbAZHqXcwDhSKkfxn1XFP340hoA8vRNEQ9o17nE0mjgIhAJHJHEC6aph56cXntijeHL3bmx+O1z+MWCMxVTaCf7dz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.8067ce28.0_1636064546578_0.20959328275983613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-button","version":"0.26.0-canary.345c2bb9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.345c2bb9.0","@material/mwc-ripple":"0.26.0-canary.345c2bb9.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.43d08ba77.0","@material/elevation":"=14.0.0-canary.43d08ba77.0","@material/ripple":"=14.0.0-canary.43d08ba77.0","@material/shape":"=14.0.0-canary.43d08ba77.0","@material/theme":"=14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-5i2BYCqlIvrWgPU5vqn3zcbidCvdA2mcch+/pJtkx1btqtmIuGRAajkKpVpo+6n2BVqi1+nY6ecBH8bVDftvXQ==","shasum":"f5d2559bd658cc8a795a6686376f018b3ce8debe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.345c2bb9.0.tgz","fileCount":20,"unpackedSize":82190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP3wCRA9TVsSAnZWagAAwSIP/1/CcyCv0tCJAhDhZboj\nCzgPiGY/lQMXfqUYmysc0x5HaQ7eoKLMQ/MT22F7mRMdGQW/HBuaCWPWDWqe\n+Pf7OPIuImrVvnmqHsPnxzybMAVVurP1G65m5mGW7bxkp6zpOkF8Y98DtBem\nO4GHwgPPql5m1PFD7P6tBYII/c+qMWxFrVgZuJ78H1N+kRsueB0rcDjb6/1H\nHBta1swIZQIrWcFB3UvPVpb38RZ9D1zJ4yawPDfUz/9JVjK4patkuC+KLUfm\nhEOeAN3QOe6/qM2bF3Xurput7NAaOLzO04Emo/xuV3PzevLw1H9FNloqMkmC\nnKG8P4AiLn8Tcg1M7lxpFt0apvZgWIV54/1toN9/skqCk9WCa4mDmp/zf/pB\nXapaQgmVe/rjFkbrgv4bh3x0ZSzKRA7NMe1qP7jFFU4Zc3W0kLRDoaSNzYt+\nDQCxC9G7I01XtylTHMzF4OzwIIYRHJGFEMGL6SNtR1hlb4f6uuS/iujK8SZ2\nF/MvwTPKn6TpHCKRvHE0uPL3ndHRuEm9XdHXQ24xPqcnwsuHhjCsXJF1akFM\nVADbi2KIlIbMt+hugZ7cJxwLCx3Q9FmoWv/MouisZubyU2HqUqvnrHqBhH4s\nbNFkDz0oiUEDDKnXEKMGe5tGlt37jI1STvRDqvMhsxmBeqQ+1/ATtFGLK3oD\naDRJ\r\n=L/jd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5nW2NJCP1Er3lESlgOLot07+8udwpsWwHo1qVw4gQVgIgUWS+BrM3qZcSWww4NgHV8Qg7bMd0PZGMC+uq/rrrqas="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.345c2bb9.0_1638465008273_0.12718838105473407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-button","version":"0.26.0-canary.0547aeeb.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.0547aeeb.0","@material/mwc-ripple":"0.26.0-canary.0547aeeb.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.17a072535.0","@material/elevation":"=14.0.0-canary.17a072535.0","@material/ripple":"=14.0.0-canary.17a072535.0","@material/shape":"=14.0.0-canary.17a072535.0","@material/theme":"=14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-3VWjXOkW42lAAHjkhLC2I1HRqiBzK2tHy3wgRPShYVHVvANjFUKV96d4zplNMBb4gYkPqfX/nCod2YnGlrXGxA==","shasum":"c4e1b2ecc7d868cf9906901e5892719a5e8dbe21","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.0547aeeb.0.tgz","fileCount":20,"unpackedSize":82190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjv0CRA9TVsSAnZWagAAIFwP/36rdDs+n5ql4S7urSPF\nBwfsJUng/IJpXGdvQB9XjIIHGmLw89kTiOMAfD2z/HOJ2ZRPEt9X64fWy7fC\nVgVr2++CT8u0MjeTCJsHHhpb4DzaySeVw+TY4VbrYckoxCKKfKFHo8pSg2kB\nk9bgmSgauCCQLUjmOvi8EPaSDjgCQmr7Zh7U8RWLf2HDqBVvSKl32fd9t8NL\nQ3FgMoBGFI6w9sRHX/g+FsGvlR6cFHrtkEaHbH3jyG0Yl+iY4xp+kVbnIlR5\nVLSKWwuqgPEEkbVxO+x3igsfNXRK+SG8RLQkKzSlK55lwUDNV+nAbyVbin2F\nkIOFFJaG5TtLIac88G3W9vhwd5k0AyTeKiqpP/xTEWKLWIfLnMSTXOViDEf3\nZpZlDcofL0sBeW3tHVRXaAKuijJY57YNKbe5V7QOrdSbWMP3+PHlVgJWmeEL\nucDdnNKLO6TIZV1WkZeHQ5H3zWBQqwr1XPIHoGmyXYCaGA8c/kJFDMYj97pL\nIdH9/zf9O8b6DdqnNsgJhVz7sF4k9MBcBXUlOcszU3buFPVNsPO7iQ9ZBYnZ\nkdOcawg9rIWKjqWzc6NVUBYU4N7WTuMGWeIf/hOfXdSTeXM3oMYiorVao6Yk\nZttHM4bJxd/99DWTqYubk7nF8yMQ8HAG9lyfgmHcmNmzdUvoo6hm4cgAJhno\nbHqE\r\n=MiBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDtg1wH678G4YcSoojjDcWNjwkx0MoTFxMGWJRBhLJ8AiBaDU0NY2lm08cAhb40ZtFQAfnCsm2kMx9TVN2UdgFt1g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.0547aeeb.0_1638808564753_0.28063036536444574"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-button","version":"0.26.0-canary.3b2452cc.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.3b2452cc.0","@material/mwc-ripple":"0.26.0-canary.3b2452cc.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.b6510c8c1.0","@material/elevation":"=14.0.0-canary.b6510c8c1.0","@material/ripple":"=14.0.0-canary.b6510c8c1.0","@material/shape":"=14.0.0-canary.b6510c8c1.0","@material/theme":"=14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-XncbppUU7iSnPcdWcHbdnHFzo8Y17WGwdXNoFlQQQuHOBvUJ2BhTnaCxPih2mYGHri1ZVoF2YJejDVAAYHPFxw==","shasum":"a9fb6ace8c5b1b15fddd43fd8cd8ca959236fcfe","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.3b2452cc.0.tgz","fileCount":20,"unpackedSize":82190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhTCRA9TVsSAnZWagAADJcP/3reLD9wEBA8aKeeLxpM\n1ilcruDEdfVx2S4OADlZxhnO5qpnjqPZ2m+WHEom8vMWzGFL6KwDFatmLYxm\nk0wkKUGoV20tOPvNlQwM+AFkTQcg4aOokhJeUE8va/8YQ+PYORhF+B4er2XY\n/Ia737nvzxPRU6eZb6ciZm9ytC4SWQgqtBCHeN3297f8twhStE6L/lVkNpis\nFWWLMPECNrrPVg5MDi7xgttI75JXXnDFPGN799h2rcoXWfoPB5IFu3VWRe0K\nhx2nfHoZXfbCYTQkkabrixEeEr/EJrhAglGnYXuaSSfVX5ggAhcAHGtxv1Fm\nvhtHM0yMdMEA4DvQ3K/cJriTxnrtOoRfbvPqEQTfUSaYdil/QngPGpT7Nv8+\npWUyrJhovPRHJIZatUlAI8iMIgr3ZluN9ZlgRvhkd++ABjC7FxE8d9itElli\nZzaGJo+8qfJx4cEXBejQCGf4DKWfqW5jSgRifLY+q7s9COkTvHC9E2bYaHyK\nk4kSMq5HdV1Tgx2t1Ifq2sqU0qUTnEIR5f6EFARAKb2iVtUhH6VZQzhozEGq\njS6NE/bU/kmWZqRuNfNnu2wXoWbdf0zpwL86i3KpsDkIzy8ujCSsbiUrFTU6\nFKoEusHJz5yTcQEATuSooUHbLxIXBFNuq47e99lcqDX3nl5vyxrrNiO13zx7\nxefk\r\n=oI+P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDseoA9BSeWfotmK5FavfgPlP0GcPpDlj2GQr/skI6c1gIhALWg5oeLI2G9lA1lSLcz5p/JXaa6tBrZr/DrWiZfozqz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.3b2452cc.0_1639008339480_0.5009710556404616"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-button","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.cf7ba5a9.0","@material/mwc-ripple":"0.26.0-canary.cf7ba5a9.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.f460e23da.0","@material/elevation":"=14.0.0-canary.f460e23da.0","@material/ripple":"=14.0.0-canary.f460e23da.0","@material/shape":"=14.0.0-canary.f460e23da.0","@material/theme":"=14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-IekoA6FIlanc/yiohp1IAZ1GY1fgU7f9bArdJhguHpB3CwshNofRySR2vRGUF3W/Bi/tRsO/8zuwSRwhk1uuKg==","shasum":"064fe57dec998d38456ab11f3fa7674985d9145a","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":20,"unpackedSize":82190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VRCRA9TVsSAnZWagAAM3kQAJ4INUaN1omazwTe3ELA\nIcTjp6rGS3BUMJJDWWjlwm1JY4DI8wpn8S/lk9w0lYxxRAbJPWdOmWVmIxT6\n7xEMqh4RYzLYpP0pst1XFaP+1B3S3TwBBS3j50rz3yBO4kw89zJ1nZ0Xro5A\nUgtBiCPcySFDMETbvHkJKw1YtXGmyxB2Xwig5664/nUdMGXyq8ak8Z3wsFPC\nEvuskIpVeuOM5cYqbl6WzgcM0skbSJgs5+2KV1Tf6ZWtSZ0txloeHLn0X+aE\nuuiKooGDE/rMQFU2pdYdlhEpXoOLk3ILmn527oiKdMNx8eVg7pXSkgq0wpH3\ngqgA9UV8JBWr0HBwUm2hw4q2D0Kc48wF77AbqaFwKZ7HrWhMqm0PKWANV036\nlirPVpFo01RGPqzUswHfiOYGFXhgNM1b8SUCNLvzg/Es3t15CYb+B6aoTbDE\no08RrMSRN42MfaeRzp3rMoaDBpK+hddNb4NnbHPtlKgupec7fGcIStml3CE3\nX7pisL7JfYIHmyDZEJuXFQOgOaoX7b8Jkr7FL26DLr6h5sBWKB05pPoYNvyP\nL9TCy9KLvD6kfBWRiT2t2kVVxfxn9T/MhqYmmXGGIrro2upR7SdA0pneWAO0\nBbbllvHzOqe2LnY42lZijiYSPLi4ov199DN0oFLW2PlkwV0gP+i6PqJuNr4n\nDB7s\r\n=w6Ae\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEymGQ1MYsc+X4Qu6G4eJ439r6m1xDE2epnBRJHLD9fjAiAlG92JewppAYtCxyIGDKszm38HK8CUkZPkZhFQiNef0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.cf7ba5a9.0_1639163217257_0.562980314598545"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-button","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.e1bcf14e.0","@material/mwc-ripple":"0.26.0-canary.e1bcf14e.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.3366a71d7.0","@material/elevation":"=14.0.0-canary.3366a71d7.0","@material/ripple":"=14.0.0-canary.3366a71d7.0","@material/shape":"=14.0.0-canary.3366a71d7.0","@material/theme":"=14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-nib8iE3Pv8lOLFbs0FINvv9AbT/quVxZeD8Jh7zWy27GaqxB/5HN4mOIwXEOU5iZwzeBeElEZKcx/YorJ5zdpA==","shasum":"45bf69590b9c61d842ecc2df6e4ec736d6a749a3","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.e1bcf14e.0.tgz","fileCount":20,"unpackedSize":82596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3dxCRA9TVsSAnZWagAA3zoP/30YmoPmbK+5FchS9Qme\nW0H+/Z5dl0yycNmEGJTh9h+egbQsoDCPgIzV89DoRKj6D885/SYzbtpkJyFH\ngxI+YiYMjXBEvuvpS+0vtvnpEb37fL8+zlWLVEhzcUVz39VVPde/pX6Foz7I\nsSJuAD9SC/gJInN+zNXI6yXGjH+G0E3iJ9QfZcGxrNC9pTx8LG7Rhv99sU5p\nvAprvvQ7EXD5HardMnePzk2ThIe8zdhpwSgAplJuI15ZIfuFd9S4Rc4V+psa\nH2QNAd4KyEwiisR/1Eq08MjbGnYLCb5A01qOv/E4w4SlbTxwlZM6fTb3jK4z\nQhE27bekRIjZ1oIcW1rrUYgg1EdgBoFcuXnx15fORQpXoITwkpBvs7+iL2Wo\nd7Tw6AZNCxoUGwdWw4KG7LobbkOxViNE44A0O1/13AFFjJ6L0q7ecVHUDQkL\nWmKAg6yiGIe/a0HxWx1lbi2k2GSRDzDXCycViAOYqYOSVGnAVBQOpQCjQb2R\ni1pZpn71htjRwM0ViYJlZPpklC0ulpGOG0+bCONJ1G1G/1oHyFk3+XAKzsEg\nhQv1/E3LogZHFYWiEZvBVCxBrt4hmSQoB4ZU0ydT0Aec5xdVxuL2bmcB4cJJ\nDk7CsAQ2E5qF246WbkiCjxlW6s8xxRQbLVEYsG7h3Y1JXgh2ihIYfl3Tr0Yx\ntVLw\r\n=Wt1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGm38K4jtLzGqQFpINT31iOm2DQu3WTuSlzAjz3EOtJqAiEAvRLDnrKQ8OI1TjyjMWcK+/F1TkEzwWuhX2swQujzpBw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.e1bcf14e.0_1640724337456_0.8311565032902717"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-button","version":"0.26.0-canary.b9d35b69.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.b9d35b69.0","@material/mwc-ripple":"0.26.0-canary.b9d35b69.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.c047f7c19.0","@material/elevation":"=14.0.0-canary.c047f7c19.0","@material/ripple":"=14.0.0-canary.c047f7c19.0","@material/shape":"=14.0.0-canary.c047f7c19.0","@material/theme":"=14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-49HIEWl4ZFsb4R4zt6+UzAJ1V7GnmFJELGEOmXTuU7jOB3KN6O/yuxQBEBLUpvQaG9iwoup8K/1N/lxrvPJnsg==","shasum":"8b498eb607dc8c60e6cbd5301da055c51068b58e","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.b9d35b69.0.tgz","fileCount":20,"unpackedSize":82596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eL7CRA9TVsSAnZWagAAzmkP/3vuczwbVtNDmhY10iWW\nWRtQvXAdOTylLjnlOYNlTVZwfi0DUcoUC6UEkbnN2kHp+Th4Ar3MoyR78bVd\nuNr0eKaKsC71Oks32rlkLuIdGIvXYE8J9i9g2QvZR3Mq+mH7HDEZXQJ53Ba9\n+nEEbyKt/j0C0w30PPrzv0is7f/Ozx2spFSB2sOa0Ts166mDstqbob21gteT\nLAIzq6AXprAUczrAQyQkCQacgp28v/5j51XFhAsTty+DvyCG4GG0lOyish/e\nsfw2om26YYCxVEQh+8b49jp7hgtGKYfDQnqgvLRR04wbagQOZqSMNDkL1uJu\n1+ucgi7I9C/DZPDeODG1UIooDCsUXSJQAlldQ3IeRYsejJ/ZGRwf8sSDb+0w\nDre+AfzGofk7TP48s2/l241dU+9tOsqqZks/AcBY3KQ9S2+z4q8Rja3mrc2J\nY2ayMd2jdR/RHVYcq/HsSUilml9J5b/YaGO9AvUeZ3tR4GPhtoNG//FehRQb\nM6MPiFUfCUBgCyMiTFdL77tVt2EbDxmLNoWzF5ESmJiTnHTMKMJcgnDC2rBC\nQ8igvR9AtU1Bv7TLRg7GyYy1gTk3HN7xVbYxFWlox46HLkH8FdSAbB0IjBOR\nqi9wXI0Zb66XvOA0uO0o87K8LPa0UUt6CKmOaod9jeLiAuLVtns+kG2L7Unh\nI5Ki\r\n=6vKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLQHLDqCSNlR8Zwm2utBJyh1ZR5dxYvmD/sZ8QVO7zAAiBSL3OSCGkWPPmwcZub3lGVttSb/cJGpnMbrkQphGOE4g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.b9d35b69.0_1641407226681_0.9927477832454965"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-button","version":"0.26.0-canary.2afff08e.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.2afff08e.0","@material/mwc-ripple":"0.26.0-canary.2afff08e.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.05db65ec0.0","@material/elevation":"=14.0.0-canary.05db65ec0.0","@material/ripple":"=14.0.0-canary.05db65ec0.0","@material/shape":"=14.0.0-canary.05db65ec0.0","@material/theme":"=14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-ZdIygzBkp37C+6I28+EggHrB80WRs6Yy8ef0qqzmQ905TcxJA2ypZVSTLQ3poS0HhrTLtdIoY82fiJEDvbGy0g==","shasum":"a7750b7ec6b590c0f7a31e11416aa980173f80a4","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.2afff08e.0.tgz","fileCount":20,"unpackedSize":82596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12u9CRA9TVsSAnZWagAALFsP/j3TeonY53NY8luaHOUH\nTLCmBaPQmQZdqZCfjTEGXNau13rDQp/1vk3O7n4B/udXgfeKccYuiFHLAkrr\nJikXUCvbLRI1ibSABPsqgZWyRAWOOlhX7XqUnZFbWllhwUv2crRllm/GeAzd\n6yPTw1KB1GxhvWb1JxetTukmZd+JxGCWyutkhmCK17fb/exrL4wJ56gWtUxy\nhY2ON3GzwrSYswLVRaouO48xGNpc7+QfV2T+YgDaPmOgTDanjLw8XK3PNoEJ\nXWZSKDz9NSXWVqIqDqQ0sd11HvvPrdrX5ULriier5wFP/YQ2yoJBYqZfSNJg\nhsHSdt97cgzvNkeNH+1xEs+mmgqun1vNlXgy9P01dZMzRgWY6RMqtPeIHELs\nBOwY2edrcPBi3LglEw5bMAV3+x/m+bUdRD/5pphKEUXKwC539sQZPghH9WP3\n8Vd3CrV/5np8Pk/E58hP/kVh8CVaaC/W3oBnG+hpkYlZ1kzfcRxFViq15cI2\nPJLouGUhEGP3rnJfOnLSTAV1BzomP6OsY5RvvcjTnGe+W4WeWH9l2VESUhHI\n4KMr49VmgrHoPvaOdn4g4h50TijJWgkojvUgXqR4A0D2Rsjt49b+uGEZqEjH\nPZ0zecNh43ADZczsv+ZE1CsAm/8/rFZRZ/Tky0lGmjaTxABZBrgpmknVs3nv\niCIc\r\n=f7yZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIezM0lnGr/WfkqPXJ/ZCMdRgEiI2UURDEzmKTD+h0XQIhAPjY6zhxJ89Yj8aybsAEkuccc5XVv9ONInqNmtuYRYIB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.2afff08e.0_1641507773135_0.8637951684498426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-button","version":"0.26.0-canary.893fc857.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.893fc857.0","@material/mwc-ripple":"0.26.0-canary.893fc857.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.6ca8b8f85.0","@material/elevation":"=14.0.0-canary.6ca8b8f85.0","@material/ripple":"=14.0.0-canary.6ca8b8f85.0","@material/shape":"=14.0.0-canary.6ca8b8f85.0","@material/theme":"=14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-K91ypLqDj8ryQlzqb4HQNyPhhn+XzMTsUMUavNs2jV0VZr35TlbtvUiY00LqFl2VNsqT/vY3Bxz51UB7PMbPMA==","shasum":"3ba612dca45641143388886d6dce084e9abacc89","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.893fc857.0.tgz","fileCount":20,"unpackedSize":82596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2Iw6CRA9TVsSAnZWagAAsoAP/RIDK4vXghiNyfYhC7kX\nDC7E11UhKL6G8Ic4+kCTAugo5hAoGtBpC06hHBpt37iQjfY9Qd+kKOVHR6Y8\nVbB5UlAzH0G2f44/7IV8EWjLOPdMKZXxQutBUWHiY3d9PVSYgwQkjzwEGPc0\nCmv9YiPMUStmlAumNy+UXXqRcMSOzT4QmlSUSnqsQ+50SJnoQ1xdFYgDHc1f\nBCjxMITjvy7UVN/zIRUlqMRHhp7bZa/wHRq9ztIHcbN1WPOyYvsIcIN/3PhI\ntRrUd6JzQk5oZ2tLKiZq5EN/v7OqE5y7BW7nzk4jvzqf/ECLag3Ubar3cwst\n324kG0qxJgRrqPtSPMlv9cliibvIxxr2+LWCUvucq0//UVY4op+kN20qp63e\ncS/9pu1EpaMOACG2ebi9xfOg2Kb8cW6UHRDhFemuw4fA6MWydXV+FiADQOoP\n3KxYD3td5IiAW1NXPvLCTHSq8MEDMa02d0VBBYy0H8zek4keu9T2a41FqVl9\nV9tDH+lRNqJiNBKaTRi6A7101qs5CMsnik/zzOLsXMgBv8Rej5u4c+JNxqWQ\nFZr0n7crYUMEIjXoMUNvaw7VEVvMLkuUneSfqgTOs+8lxW+Bqozk/IATOtGp\njg29c1UvGu/yiG/mFTuo5AmxYqoRjydU37saxgUHcb+jSwq6JRFNlvqMf/5q\nEBZ+\r\n=A7sR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAnrE7LtJg07pPfPJBG7NPWu+alkl0l5vdCXyOdntFVqAiBod1VV1EppAbvEnVcazg6VVv38P6ZbCDVO2PA/EZ0ZQQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.893fc857.0_1641581626056_0.3370845377953102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-button","version":"0.26.0-canary.69ba13b7.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.69ba13b7.0","@material/mwc-ripple":"0.26.0-canary.69ba13b7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.c14e977ee.0","@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-PVIqaUSqR0p0gfTfH2RYocQPAezp9uY32TUuavNS2iZTPRIofbM9ggmq88e3aeKAN6qPmzEeeOIh4YvbfiuOaw==","shasum":"2ea07b379d1d9f6a8ddc136964038f525a4a1f51","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.69ba13b7.0.tgz","fileCount":20,"unpackedSize":82596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I9xCRA9TVsSAnZWagAA2goQAIOk5wBYJ80shZnwWWRe\nxFYTeTlwGzHskYsTXM4VTZN9A22JMh2p/KB9QA45o9uA/KOL68RJiapnOd2w\nihi/8bVTWzFnj9gOzMf5VnPkC+QCShiGwshX6lyKl+IxmGIEyDmUpXNRGVSx\nK1MzXCdQ/Us7kLqw3xXdBDu4YXiH2Lp7q88Ixh5eB7zzCrqNCfJvgj42itpo\nrZF6qxHKv3SRAFxpKbrVkzHe3yND9AHuxmJAZDxovbFrUTdVlNg/U/He/QUp\nRv2CnsgilGMUtVusFD0kQtB6mXOfRUU3PqXFrs4W0mBN8sGy0Dcfpz6dGUnp\nQ/daoYhpo16eHJWzAC4WiIuVmCLYtROlU1/w4f5BbLATDdRfYpiia7Vyoi05\n75xEK1TpYmDvpLG3kF7y2I3xsiSJGTVpadtN6SBIcwtCDHlHAVwluLgs4l40\nFYvhjCxlbijZXI4/3/3Qd/LcRHB4chSzMz83ETKtQ08jQXDGNxTz6AXB9eIs\nTWihl7jvmz1z8KwKGF/Ey01PCDkm4INjepKy3bay6+/uSutRvyEooabxZD1D\nxEopQmtfripHHAzawfHly+YTep0UYWjkyBBdNbpd5bnq5j9/qe+R2DbyPPwY\nmf8yL16hKwQL1mFWWewEnDMDijXiCyKQL/oBGLs09EjQNZvlGOt7QaIwL/w3\n7v69\r\n=XbFC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC50OBcoesL0ehsCznl1vLuatsbwU6VfHIhyTHQDWe4vgIgRJfqZ2T7fp7qjZr8JFaw2mKSjtU0LGJGM7/tctwPR4I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.69ba13b7.0_1642631025491_0.916492131255938"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-button","version":"0.26.0-canary.0af8ade5.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"0.26.0-canary.0af8ade5.0","@material/mwc-ripple":"0.26.0-canary.0af8ade5.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.c14e977ee.0","@material/elevation":"=14.0.0-canary.c14e977ee.0","@material/ripple":"=14.0.0-canary.c14e977ee.0","@material/shape":"=14.0.0-canary.c14e977ee.0","@material/theme":"=14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-8JFNWsPzYSlaXkrpNbgfrcf/ZTrki1jMxqThHS6XQSyyJrtcp1niz81rmyZsJ/tvnMyep0o24AQTuFtmIPulwA==","shasum":"a7d04ad80aea6cd1af27317d9c1206c0933214da","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0-canary.0af8ade5.0.tgz","fileCount":20,"unpackedSize":82596,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeQCRA9TVsSAnZWagAABE4P/2elGeI98pJb1k8yuEga\n8tmRXH0SCu9gBAYZrB3ylBmcxLbyBy+yPZhFi3EQhsd90fturEp3kwdikJUn\n/DkUzMWdns2Fn97aGyPuux4Z9R9ztJOdrsZ+yjf23NkpdEC2G9Tsq/0BSKJg\nNgyQqPk2SWyBnPBRfv9ug5IkH5zkd2Fk8htRFTIq9Nj1xba0p4llk9CLAGTC\npcaLm8/0AJ/gZCWPUgmTKIKvdHc9q86AyPTJy3c59Gj/tc+It78npFDayk3w\nmDLXPYmLXmgU5C46cqgP0MnIAcmSi8srnq5BsNBdz2gzVVBlCp5zCT8yJWok\nTzUpT7kiS6kfz9hAuwoWxDMwUU20uu4byIYZLsd8mlRRLOqCxjIN2xzGKcfW\n/MDhC47/OaTQQSecusSQ9Zj1qIVJ0dxuxdTl6yobVXSLXTEII96O3pSi7Q54\nQdEUuRRE84nfebg5L+7mnVs2xHLqDHDOGVqGHXclk9ioK9fU/gOwz8jdiEIu\nxVK+WeiBXwPmeNP2kebLdDq1rep66NcxyCMzlrApd9Tft8itvYSG+N4QTofN\nLNI3qpXHtTexFJ2fIRorgok6YEOUoCMKe/8CvHsAi8bhTNwwZL5NiriZR9Jb\nmrbgkjLO4ktQ4yTXjZEsT7ODQ/gNqPdiAsm5m1PfrJd9hFqteUkCQ0I5Y8ed\ntibP\r\n=4OpI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKYe4GqmayW/Uue/UbRiZZP6hIs8UI7EMMtBSz0ewNnQIhALGo3z6nVu7ACrtVYeN3HpYRgce/KQW3BE4iU6Bl9rHq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0-canary.0af8ade5.0_1644271504708_0.9563527295284102"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-button","version":"0.26.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.26.0","@material/mwc-ripple":"^0.26.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0","@material/elevation":"=14.0.0","@material/ripple":"=14.0.0","@material/shape":"=14.0.0","@material/theme":"=14.0.0"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-tRO/uSiajvCSR5YVDSoFC6kPCt2okttYOvAfyVkljgNtnhORekcitgKFNQq6JBN2uvD6s/svJXlW7Xv0j/XCQA==","shasum":"d8e03b5501f733577c681ed3d0bef4308371be30","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.0.tgz","fileCount":20,"unpackedSize":82583,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC10snwlwzaPlPNuoUwOlWo3g8D3LkiWuIKxFcXfW5nPwIhAP839nNw1vFX+adXfWb0Qex1QpyTipFfBB10PBNTNXW+"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpmag//SW4uRtPRdyGsaDQWOl81DZim0Jxvaqj2lFMEZeSSSyZzuPnE\r\n5znroRGSy3V0KuNGJlHsZQgrf/O4SH1qzyBWwofgH+V92GVMuPxySc9QOO5h\r\nAmDlxpyjNpCxyCuRE4pZWftjuxl4pMor96nPLcR1X4DP9LI4rcKhqSn5SVKE\r\nclsS3ZevmSELANSoqK8D5lxb2I6YMK+prYmGOWXVO6QuxlP21VjH/PIJPrRM\r\n4s4GlXKN4DHZPpbj0e2hOG5QqLHmt8Wh660DHfc/zsDsIS0fWHDl9FX9Y962\r\nV+iDhABpDM/SdvfEtQP+11HWNcJvNNsZ09AbN+288/3Yvzz5+hWP33lcwEMw\r\nAR6SoLAjPGv7HKKb/mW/E0vJsyBEmTD6uu0V00CFRviwejCmRD9siLVGuD7o\r\nSzhqxoC6+XGRv+BCNgtAZe4sVMXdpdJ5kC/bRICdJ7UzjC46Qij1aJk5poUJ\r\n9BDlktDQxR8tJ4kYVt1nAxw0IWKFlX/60I/7ZApjgKSer/Fs3o0FoT2EIjc0\r\nf4mlmTOYevHDMUQEGexdRF50BSNXcCL0bo/ADepi7in4HghzC+O6nigXShme\r\naB07yt2nq6sVm4jwJYxCdJ/cGJyEZ3E10+9XXJUxnPjUzXGmCHEpkWJtmzj0\r\nuwZHoUCeafncCbGnSU/qycvLNKMROt7VdyQ=\r\n=LITl\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.0_1651599033442_0.1467503702319164"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-button","version":"0.26.1","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.26.1","@material/mwc-ripple":"^0.26.1","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.53b3cad2f.0","@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-ptgAmg50k+71M6ynfv6QeNaBnX7X/EAnhOjxZqhDHrKwZcFuuQyFJJ6r4ypjc21eCSPS7o6xRqJyI4PPpf3xkA==","shasum":"751bc8296a22add632bcba1c5b5dbb3dda7054c5","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.26.1.tgz","fileCount":20,"unpackedSize":82764,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCT8o62TyquPuLn34wKl2EJQgNULbfhrgmQ3Ci2YuxQVwIhAMy1/2iKNvI83oOO4YkV9SiEFcZbggqCIrTPj3pN5pSr"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmonpA/+OKU4qbeP8bvvkDLRH9N1QQu8t59HSBGWJpUIoaC8xDXmZUhT\r\nRqkjBFTUkmdQs2K18LjQK3X7qNnBT5qP/YtZ3Hn7CuHMDdXvzBYWHi7ajVWY\r\ncK4hsTEt2uJjDb337TLLxKjaMCeOrO7/elWdM/dNatPIznQthlsuHv+KDlfi\r\n0a82IIe1tHx5v7ECzuxByq5vVFlzh1ii5Jstj5H60JF7keXGqWPP9lQJ7Vut\r\nvx7L2NXglENMiOBgZhDdsRumrd9/dtG0Cpn2BpkTKt9SK9kSazqnxXKkksEq\r\n+/yUiCcMjYNbWnmymzD1bsh3mjuIbU8N+APrUyGvmIE6G2qbFaYMMnWJF+gF\r\nO77iOc0ADQY7/oIAjHEYePrwmVE9yirgR8y+VuLpCnSCeWIwLoH3ifvBURdn\r\nubsbZhahGSHMN+VoDzkmx+LdHnL5WIYKiqeO+1KPC4OQN3qyu8dpmCybbFs9\r\n/1jA2z1VHB4LPV/eNPrmcMzPwmiqNpRq+7eO+VihmmgHsBtmf4rhDF5SBn6G\r\nZqwZBEw/ieo9uoDGocR6bM9mhGcTbANwqGxiYKx6Zlqy5oLVkz4abGhKIiB5\r\nIbDk972pz5wKApOgGMcFj8AxJXRDK7eyuiIR/2P1fsVmka8xvSibM6NbWIja\r\nB3hnYOrE0nIT3O6umN4VeEEPwnpN3yOR/5U=\r\n=QPFY\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.26.1_1652128311456_0.7060203265404277"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-button","version":"0.27.0","description":"Material Design button web component","keywords":["material design","web components","button"],"main":"mwc-button.js","module":"mwc-button.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"license":"Apache-2.0","dependencies":{"@material/mwc-icon":"^0.27.0","@material/mwc-ripple":"^0.27.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js styles.scss demo_styles.scss"},"devDependencies":{"@material/button":"=14.0.0-canary.53b3cad2f.0","@material/elevation":"=14.0.0-canary.53b3cad2f.0","@material/ripple":"=14.0.0-canary.53b3cad2f.0","@material/shape":"=14.0.0-canary.53b3cad2f.0","@material/theme":"=14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-button@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-t5m2zfE93RNKHMjdsU67X6csFzuSG08VJKKvXVQ+BriGE3xBgzY5nZdmZXomFpaWjDENPAlyS4ppCFm6o+DILw==","shasum":"192ab82eab8f7f4dcbf987d0af7bb808408d77d2","tarball":"https://registry.npmjs.org/@material/mwc-button/-/mwc-button-0.27.0.tgz","fileCount":20,"unpackedSize":82764,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGEu4deBXrkrJnJAtytcWhUDekIe3nj6CCPB2DWZs7muAiBhYtOzrqrrGws98eG+vi6Ta21RlK4+mp764z3k5hPpgw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlcA/+P3QvvKJRFierdxQiggP2ocufrlXCPGHMEJlItg/nqyx1G2yB\r\nu/ZC3D0CTmF/8fI/n/XTwyhsd3zqek7OOpnI3ogpP3JZKyv7qDnyoec99OSr\r\nU2Mtqkq4edHpe9DIxQ0gJTpaCWa3UCc8Hm1TsfyYImrJUvc0aAD0nsYOxiCF\r\n1MAQLcI8T2+5KcIFTJv2CsxyhucYbhUSAK3u27a5vUTY6G20M2iRwzQEp5Zx\r\n6XFwdF5XsN1U/ZVJQoF64Z11vMF0XhekSahVFhaBHT14qNJ5wRfo+Yzw/Ck/\r\nzjtMu2drvSQQjjbi6Yf5fzzHwk4xdFYdqTgmaLMCJpnhqbh/pL2jaQd96ShL\r\nziEnpCefHli4y2f4pENs5fampKbrshwHXF4vHwAS5nhuNGLUQ1SzGK3z+Prp\r\n0Lg4/GTUQGH6y7oakrIvI5WMRMNtX52Dh0Df8a6N1/0RG6u0rOO0ZGc3Xpmc\r\n5Ssj6hvGiygztqFi00/E2fqRDX4Jq+W/rd0eNiRY2dQIReleqaDktSq7NlSX\r\nTo4Vfe8ucWB9ay03QrBxo5kRHkG9aWEOLB8ieeuGcLP6Rjd656zMdaemfBi6\r\nUdeY0+0hsE6B7LVFqa4RiwoALPmNq8HV4CCaBEUNMPHzPU63A5nOcYeNN00Q\r\nAY4QhwVKp0DALY9z8eQfz7a9NC+bi8h244Q=\r\n=TSOZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-button_0.27.0_1660331528658_0.6508510258541502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2018-05-08T00:04:40.216Z","0.1.0":"2018-05-08T00:04:40.373Z","modified":"2024-04-04T18:46:07.634Z","0.1.1":"2018-05-09T21:05:14.260Z","0.1.2":"2018-06-14T22:51:15.836Z","0.2.0":"2018-09-14T00:36:46.032Z","0.2.1":"2018-09-22T01:00:30.594Z","0.3.0":"2018-10-04T23:25:58.607Z","0.3.1":"2018-10-08T19:20:45.522Z","0.3.2":"2018-11-17T02:06:00.757Z","0.3.3":"2018-12-04T00:58:06.426Z","0.3.4":"2018-12-13T20:39:19.501Z","0.3.5":"2019-01-11T22:16:46.915Z","0.3.6":"2019-02-05T20:18:38.033Z","0.4.0":"2019-03-12T00:01:27.507Z","0.5.0":"2019-03-26T22:38:51.457Z","0.6.0":"2019-06-05T22:20:20.239Z","0.7.0":"2019-08-27T21:23:51.710Z","0.7.1":"2019-08-28T02:54:23.887Z","0.8.0":"2019-09-04T00:04:47.210Z","0.9.0":"2019-09-27T01:36:17.166Z","0.9.1":"2019-09-30T21:05:02.129Z","0.10.0":"2019-10-11T23:28:19.639Z","0.11.0":"2019-11-26T21:49:35.371Z","0.11.1":"2019-11-27T00:26:43.894Z","0.12.0":"2019-12-17T23:47:54.762Z","0.13.0":"2020-02-04T04:46:36.958Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:21.536Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:04:56.443Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:24.833Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:08:47.937Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:09.079Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:42.215Z","0.14.0-canary.024f371a.0":"2020-03-03T01:28:57.857Z","0.14.0-canary.2f164110.0":"2020-03-03T21:33:53.689Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:48.675Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:15.162Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:36.009Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:28.626Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:14.330Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:18.655Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:20.462Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:35.878Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:14:49.675Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:21.882Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:34:58.296Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:31.964Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:19:48.449Z","0.14.0-canary.b3211481.0":"2020-03-11T20:23:59.392Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:53:54.456Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:15.331Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:23.500Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:46.592Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:23:53.373Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:42.594Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:24.349Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:17.626Z","0.14.0":"2020-03-19T21:28:37.588Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:00:56.247Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:11.214Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:35:52.559Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:30.638Z","0.14.1":"2020-03-23T17:57:33.176Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:58:50.925Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:37.806Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:09.325Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:29:58.191Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:03.276Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:25.172Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:20.001Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:28.784Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:15.915Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:15:45.023Z","0.15.0-canary.072084ab.0":"2020-04-01T18:39:47.815Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:43.211Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:03.450Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:09.193Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:38.842Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:08:52.611Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:04.137Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:26.574Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:32.805Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:40.623Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:31.891Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:09.981Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:02:51.643Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:36.143Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:42.917Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:16.292Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:01.776Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:02.852Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:29.428Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:17.650Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:11.963Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:18.962Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:17.632Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:06.596Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:25.814Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:18.285Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:37:54.294Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:19.101Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:38.780Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:58:54.900Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:43.438Z","0.15.0-canary.58d51135.0":"2020-04-23T00:44:53.084Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:09:57.023Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:01.191Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:42:59.484Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:16.599Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:35.768Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:40.699Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:47.723Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:41.980Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:55:43.135Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:01.036Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:14.509Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:27.182Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:14.837Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:14:45.014Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:00.026Z","0.15.0-canary.457bf035.0":"2020-05-01T20:50:49.935Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:33.245Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:00.605Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:37.736Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:33.343Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:44:52.562Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:00.962Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:09.028Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:13:45.113Z","0.15.0":"2020-05-05T22:36:13.658Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:28.830Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:14:42.816Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:13.683Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:31.635Z","0.16.0-canary.588062d7.0":"2020-05-08T21:23:43.905Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:03.993Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:39.019Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:12.964Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:19:48.788Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:16.965Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:36:57.949Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:14.442Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:25.438Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:39.156Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:11.424Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:21.672Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:24:48.204Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:49:50.322Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:32.706Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:39.057Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:31.652Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:47:48.207Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:15.660Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:22.995Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:38:37.223Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:15.839Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:30:50.440Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:24.981Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:15.881Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:34.220Z","0.16.0-canary.17d33745.0":"2020-05-26T16:13:48.695Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:42:46.069Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:04.583Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:21.165Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:14.751Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:13.606Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:29.226Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:00.337Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:36.454Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:08.558Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:37.357Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:49:46.441Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:29.143Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:28:50.038Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:13.328Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:38.802Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:45:49.481Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:02.264Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:23.491Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:04:42.346Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:02.668Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:42.816Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:05.449Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:58:25.931Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:57:42.610Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:40.509Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:41.669Z","0.16.0-canary.f155c058.0":"2020-06-18T18:07:49.442Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:35.064Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:44.268Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:42.347Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:12:40.796Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:14:58.872Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:09.064Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:21.737Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:18:53.146Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:13.651Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:17.894Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:29:37.977Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:15.220Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:24.154Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:09:46.201Z","0.16.1":"2020-06-30T21:14:47.243Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:06.635Z","0.17.0":"2020-07-01T19:44:16.744Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:23.483Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:25.556Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:31.477Z","0.17.2":"2020-07-02T05:58:18.531Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:20.212Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:31.655Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:08.887Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:26.093Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:38.395Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:25:44.817Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:28.213Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:21.181Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:21.810Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:01.841Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:32:48.102Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:31.702Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:41:56.422Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:26.918Z","0.18.0-canary.44966b65.0":"2020-07-15T18:04:55.375Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:38.143Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:03.899Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:31.066Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:40:52.562Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:43:32.397Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:31.912Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:39:54.802Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:41:55.093Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:00:37.204Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:41.269Z","0.18.0-canary.346a622a.0":"2020-07-22T23:39:56.766Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:25.116Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:30.928Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:10:51.443Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:06.920Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:19.840Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:30.735Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:04:50.149Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:13.437Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:27.082Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:30.938Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:36.639Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:29.996Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:54:52.639Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:12.314Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:10.991Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:35.217Z","0.18.0-canary.354eb695.0":"2020-07-30T23:57:52.198Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:31.373Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:08.052Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:22.539Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:40:41.638Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:05.538Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:46:40.618Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:33.214Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:35.291Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:19.341Z","0.18.0":"2020-08-03T21:24:22.577Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:06:52.344Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:05.062Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:29:44.734Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:45:57.741Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:25.990Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:21.304Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:18:45.998Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:24.671Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:43:45.008Z","0.19.0-canary.96d15938.0":"2020-08-07T20:28:52.511Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:25.975Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:25.600Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:06:59.697Z","0.19.0-canary.1583e263.0":"2020-08-11T23:10:41.838Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:07.532Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:27.265Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:32.207Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:18.492Z","0.19.0-canary.758635ed.0":"2020-08-14T17:16:36.715Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:02.074Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:28.658Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:29.906Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:01.350Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:43.006Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:06.915Z","0.19.0-canary.5962b365.0":"2020-08-19T20:28:50.902Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:55:53.867Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:00.478Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:00.341Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:25.531Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:03.573Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:31.885Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:13.755Z","0.19.0-canary.14a172db.0":"2020-08-25T19:47:46.754Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:05.723Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:21.071Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:13.654Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:06.580Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:10.788Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:20.095Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:34.888Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:06.669Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:12.149Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:34.376Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:33.839Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:56:52.839Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:36.817Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:05.382Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:14.788Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:17.296Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:13.164Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:31.438Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:12.927Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:08.262Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:20.534Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:28.041Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:18.557Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:05:30.956Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:24:48.704Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:17.920Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:37:54.780Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:33.408Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:08:37.653Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:31.484Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:25:42.462Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:07.230Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:23.408Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:19.391Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:28.655Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:25.792Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:14.825Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:11.246Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:22:48.828Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:25.430Z","0.19.0-canary.af110e86.0":"2020-10-02T23:49:53.970Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:08.430Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:24.670Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:07:45.107Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:31.669Z","0.19.0":"2020-10-07T22:33:20.658Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:53:43.276Z","0.19.1":"2020-10-08T23:05:56.009Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:07.021Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:19.667Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:12.554Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:19.702Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:15:52.302Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:30.169Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:27.822Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:14.308Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:01.156Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:14.790Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:23:51.332Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:03.003Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:10.309Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:36:58.304Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:36.342Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:37.874Z","0.20.0-canary.5937f468.0":"2020-11-04T21:05:43.460Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:30:48.778Z","0.20.0-canary.184861ee.0":"2020-11-07T00:37:43.409Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:05:52.387Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:57:58.377Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:07.975Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:03.417Z","0.20.0-canary.2c553352.0":"2020-11-12T22:42:46.240Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:27.517Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:03.906Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:25:59.172Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:11:46.803Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:10.423Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:16:41.997Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:06.628Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:19:54.081Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:36.094Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:18.799Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:24:39.077Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:11.535Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:19.660Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:17.041Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:09.884Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:55:48.669Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:27.013Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:07.650Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:18.774Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:49:43.570Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:25:59.158Z","0.20.0":"2020-12-03T22:28:46.858Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:56:51.299Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:03:53.605Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:53:57.320Z","0.21.0-canary.635c7996.0":"2020-12-17T23:31:47.766Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:48:49.163Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:04.920Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:39:40.657Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:38.766Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:35.942Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:15.005Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:08.873Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:03.016Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:29.329Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:54:56.368Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:12.151Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:06:55.197Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:30.055Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:14.934Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:14.610Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:25.464Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:29.400Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:19.832Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:15.615Z","0.21.0-canary.597ca1b6.0":"2021-01-20T00:59:47.960Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:23.131Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:37:37.329Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:37.236Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:31.668Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:29.665Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:26.579Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:27.677Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:32:46.393Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:51:50.556Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:12.904Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:30.498Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:03.085Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:13.838Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:27.037Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:08.333Z","0.21.0-canary.5a328336.0":"2021-01-28T19:54:37.775Z","0.21.0-canary.533b1251.0":"2021-01-29T15:11:39.344Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:26.472Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:03:45.399Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:06.221Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:17.737Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:18:34.521Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:03.004Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:01.107Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:28:55.050Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:01.353Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:20.864Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:24:53.365Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:02.328Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:04.770Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:28.104Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:13:54.494Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:01.718Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:15.427Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:16.114Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:00.253Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:12.856Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:07.928Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:26.062Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:34:45.045Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:47:32.353Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:03.822Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:51:37.434Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:18.537Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:08.752Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:31.065Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:24:37.751Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:32.291Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:13.067Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:20.580Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:00:57.830Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:51:44.305Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:15.003Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:23:20.247Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:46:40.657Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:21.923Z","0.21.0-canary.0138863c.0":"2021-03-11T18:36:50.556Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:18:46.875Z","0.21.0-canary.520290a9.0":"2021-03-11T22:27:57.656Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:25.741Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:24.233Z","0.21.0-canary.2d736253.0":"2021-03-15T22:35:52.585Z","0.21.0-canary.7033124d.0":"2021-03-16T18:37:35.320Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:01.393Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:04:41.308Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:18.437Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:01.172Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:29:57.833Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:17.053Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:40:52.750Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:29.965Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:26.455Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:47:44.915Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:16.097Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:27.516Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:07.813Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:11.630Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:25.682Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:03.022Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:05.031Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:21.741Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:42:42.259Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:23:53.943Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:03.142Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:30.817Z","0.21.0-canary.e142c144.0":"2021-04-12T14:50:37.389Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:30.538Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:12.360Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:41:52.695Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:18.915Z","0.21.0-canary.ff79b092.0":"2021-04-15T18:59:53.890Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:22.710Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:02.981Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:00.483Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:35.559Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:09.328Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:29.675Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:18.953Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:28.264Z","0.21.0":"2021-04-30T23:58:08.425Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:16.527Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:11.254Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:35.296Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:39.034Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:36:55.613Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:21.863Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:15.121Z","0.22.0-canary.25693d60.0":"2021-05-07T21:55:55.850Z","0.22.0-canary.c497962b.0":"2021-05-07T22:19:51.146Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:19.052Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:12.546Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:26.806Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:34.208Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:16.958Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:05.092Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:38.791Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:30.729Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:21.236Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:24.266Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:11.219Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:22.981Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:49:51.641Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:26.954Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:02.095Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:37.045Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:27.878Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:20:56.824Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:12.636Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:50:59.106Z","0.22.0-canary.b401a081.0":"2021-05-21T23:22:58.286Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:26.002Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:02:46.645Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:13.594Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:21.815Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:25.743Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:25.191Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:03.601Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:11:10.101Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:20.692Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:08.131Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:13.050Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:15.333Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:05.285Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:02.302Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:28.217Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:08.465Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:36:40.080Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:03.554Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:19.049Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:51:52.231Z","0.22.0-canary.573d8913.0":"2021-06-18T23:26:41.891Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:37.133Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:05.386Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:06.880Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:00.937Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:15.498Z","0.22.0-canary.73122cba.0":"2021-06-30T19:36:47.942Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:01.073Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:21.009Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:21.045Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:13.861Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:30.384Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:02:44.922Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:16:45.493Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:36.412Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:03.851Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:40.115Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:26:35.534Z","0.22.1":"2021-07-14T22:52:53.149Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:04.946Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:33.232Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:03:43.813Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:38.736Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:03.804Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:08:48.800Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:00.354Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:15.091Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:07:47.675Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:07.211Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:36.572Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:04.857Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:07:34.223Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:50:43.301Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:36.407Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:41.344Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:38.097Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:52:56.789Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:52:56.244Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:03.836Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:12.495Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:15.304Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:56:49.855Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:24:50.827Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:04.381Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:05.954Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:24.482Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:23.160Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:07.101Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:31:52.428Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:13:46.939Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:47:45.646Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:29.152Z","0.23.0-canary.193c87be.0":"2021-08-04T18:07:40.102Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:10:53.621Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:27.578Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:48:49.723Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:31.950Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:03:53.670Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:46:58.789Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:21:40.382Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:04.415Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:12.713Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:16:59.450Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:25.683Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:20.787Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:23.540Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:14.317Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:20.752Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:20.804Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:32.616Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:13.592Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:42:39.993Z","0.23.0-canary.6db58716.0":"2021-08-23T09:07:58.640Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:16.657Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:49:56.343Z","0.23.0-canary.756208fb.0":"2021-08-25T19:50:41.829Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:00.377Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:14.570Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:44:53.701Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:07:44.158Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:28:57.947Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:28:44.516Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:35.250Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:01.029Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:31.574Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:26:45.129Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:11.640Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:24.919Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:36.265Z","0.23.0-canary.76c68381.0":"2021-09-08T20:13:47.540Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:22.547Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:32:57.871Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:20:46.117Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:19.035Z","0.23.0":"2021-09-13T21:35:46.877Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:09.640Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:12.615Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:18.603Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:19.144Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:35:54.314Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:11.731Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:44:50.234Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:37.196Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:14.009Z","0.24.0-canary.a7132082.0":"2021-09-15T21:45:43.542Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:37.625Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:07.173Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:08:46.011Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:08.859Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:54:54.025Z","0.24.0-canary.569d739f.0":"2021-09-20T21:23:48.502Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:00:44.984Z","0.25.0":"2021-09-21T02:53:04.035Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:10.309Z","0.25.1":"2021-09-21T03:12:42.622Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:07.118Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:15.984Z","0.26.0-canary.07e91417.0":"2021-09-22T21:05:46.432Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:36.974Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:08.143Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:21.391Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:31.287Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:50:50.114Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:05:49.074Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:33:52.542Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:16.795Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:33.188Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:15.029Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:21.146Z","0.25.2":"2021-10-11T23:18:33.720Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:28.429Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:36:59.538Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:37.027Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:29.736Z","0.25.3":"2021-10-21T17:55:44.720Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:26.635Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:44:54.604Z","0.26.0-canary.232327ee.0":"2021-11-01T20:15:46.055Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:24.757Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:07:51.287Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:33.521Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:44:59.255Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:02.852Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:07:54.287Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:26.762Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:08.485Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:04.903Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:05:39.654Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:06:57.424Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:37.581Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:07.022Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:22:53.381Z","0.26.0-canary.893fc857.0":"2022-01-07T18:53:46.280Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:23:45.628Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:04.855Z","0.26.0":"2022-05-03T17:30:33.680Z","0.26.1":"2022-05-09T20:31:51.722Z","0.27.0":"2022-08-12T19:12:08.856Z"},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"},{"email":"hi@yef.im","name":"yefim"}],"description":"Material Design button web component","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/button"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-button>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-button.svg)](https://www.npmjs.com/package/@material/mwc-button)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nButtons allow users to take actions, and make choices, with a single tap.\n\n[Material Design Guidelines: Button](https://material.io/design/components/buttons.html)\n\n[Demo](https://material-components.github.io/material-web/demos/button/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-button\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/standard.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/standard_with_icon.png)\n\n```html\n<mwc-button label=\"standard\"></mwc-button>\n<mwc-button label=\"standard\" icon=\"code\"></mwc-button>\n```\n\n### Outlined\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/outlined.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/outlined_with_icon.png)\n\n```html\n<mwc-button outlined label=\"outlined\"></mwc-button>\n<mwc-button outlined label=\"outlined\" icon=\"code\"></mwc-button>\n```\n\nWarning: Do not attempt to use multiple variant attributes on the same button to\nachieve intended styles. For example, `<mwc-button raised outlined>`. Doing so\nmay subject you to future breaking changes. Instead, pick the single variant\nmost appropriate for the use-case and write Sass to customize the buttons\nindividually.\n\n### Raised\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/raised.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/raised_with_icon.png)\n\n```html\n<mwc-button raised label=\"raised\"></mwc-button>\n<mwc-button raised label=\"raised\" icon=\"code\"></mwc-button>\n```\n\n### Unelevated\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/unelevated.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/unelevated_with_icon.png)\n\n```html\n<mwc-button unelevated label=\"unelevated\"></mwc-button>\n<mwc-button unelevated label=\"unelevated\" icon=\"code\"></mwc-button>\n```\n\n### Dense\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/dense.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/dense_with_icon.png)\n\n```html\n<mwc-button dense unelevated label=\"dense\"></mwc-button>\n<mwc-button dense unelevated label=\"dense\" icon=\"code\"></mwc-button>\n```\n\n### Trailing Icon\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/trailing_icon.png)\n\n```html\n<mwc-button label=\"trailing icon\" icon=\"code\" trailingIcon></mwc-button>\n```\n\n### Disabled\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/disabled.png)\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/disabled_with_icon.png)\n\n```html\n<mwc-button disabled label=\"disabled\"></mwc-button>\n<mwc-button disabled label=\"disabled\" icon=\"code\"></mwc-button>\n```\n\n### Customize Colors\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/custom_color.png)\n\n```css\nmwc-button {\n  --mdc-theme-primary: #e9437a;\n  --mdc-theme-on-primary: white;\n}\n```\n\n## API\n\n### Slots\n| Name           | Description\n| -------------- | -----------\n| `icon`         | Leading icon. Overrides `icon` property. Use `label` or the `icon` property to set the `aria-label`.\n| `trailingIcon` | Icon to show _after_ the label. Overrides `trailingIcon` property. Use `label` or the `trailingIcon` property to set the `aria-label`.\n| _default_      | Default content to display between both icons and after label. __NOTE:__ It is highly recommended to set the `label` property instead of projecting text as it will also set the `aria-label`\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `aria-haspopup` | `string` | `undefined` | Indicates the availability and type of an interactive popup element, such as menu or dialog, that can be triggered by the button.\n| `icon` | `string` | `''` | Icon to display, and `aria-label` value when `label` is not defined.\n| `label` | `string` | `''` | Label to display for the button, and `aria-label`.\n| `raised` | `boolean` | `false` | Creates a contained button that is elevated above the surface.\n| `unelevated` | `boolean` | `false` | Creates a contained button that is flush with the surface.\n| `outlined` | `boolean` | `false` | Creates an outlined button that is flush with the surface.\n| `dense` | `boolean` | `false` | Makes the button text and container slightly smaller.\n| `disabled` | `boolean` | `false` | Disabled buttons cannot be interacted with and have no visual interaction effect.\n| `trailingIcon` | `boolean` | `false` | When `true`, `icon` will be displayed _after_ `label`.\n| `expandContent` | `boolean` | `false` | When `true`, the space after the label and before any trailing icon, where default slotted content is rendered, is expanded to fit the available space inside the button.\n| `fullwidth` | `boolean` | `false` | When `true`, the button is expanded to fit the entire available space.\n\n### Methods\n*None*\n\n### Events\n*None*\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------- | -------------------------------------------------- | ---\n| `--mdc-button-horizontal-padding`     | filled: `16px` outlined: `15px` default: `8px`     | Left and right padding of the button label (for outlined buttons the outline width is automatically subtracted).\n| `--mdc-button-outline-width`          | `1px`                                              | `width` of the outline of an outlined button and attempts to keep the component size constant.\n| `--mdc-button-outline-color`          | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/color_0,0,0,12.png) | Color of the outline of an outlined element.\n| `--mdc-button-disabled-fill-color`    | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/color_0,0,0,12.png) `rgba(0,0,0,0.12)`  | Background fill color of a disabled raised or unelevated button.\n| `--mdc-button-disabled-ink-color`     | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/color_0,0,0,37.png) `rgba(0,0,0,0.37)`  | Text color of a disabled button as well as the outline color of a disabled outlined button.\n| `--mdc-button-disabled-outline-color` | ![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/button/images/color_0,0,0,12.png) | Sets the color of the outline of a disabled outlined button.\n| `--mdc-button-raised-box-shadow`          | mdc elevation 2 | Sets the box shadow of the raised button.\n| `--mdc-button-raised-box-shadow-hover`    | mdc elevation 4 | Sets the box shadow of the raised button when focused or hovered.\n| `--mdc-button-raised-box-shadow-focus`    | `--mdc-button-raised-box-shadow-hover` | Sets the box shadow of the raised button when focused. Note, if button is both focused and hovered, then hover will override focus box-shadow.\n| `--mdc-button-raised-box-shadow-active`   | mdc elevation 8 | Sets the box shadow of the raised button when active.\n| `--mdc-button-raised-box-shadow-disabled` | mdc elevation 0 | Sets the box shadow of the raised button when disabled.\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name                                 | Description\n| ------------------------------------ | -----------\n| `--mdc-theme-primary`                | Color of a flat or outlined button. Background color of a raised button.\n| `--mdc-theme-on-primary`             | Text color of a raised button.\n| `--mdc-icon-font`                    | Font to use for the icon.\n| `--mdc-typography-button-<PROPERTY>` | Styles the typography of the button label.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `2` | `0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)`\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n| `8` | `0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)`\n| `0` | `0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Button](https://material.io/develop/web/components/buttons/)\n","readmeFilename":"README.md","keywords":["material design","web components","button"]}